與ECMA6

的index.html與ECMA6

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script> 
     <script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script> 
     <script> 
      traceur.options.experimental = true; 
     </script> 
     <link rel="import" href="x-item.html"> 
    </head> 
    <body> 
     <x-item></x-item> 
    </body> 
</html>

Web組件和我的web組件： X-item.html

<template id="itemtemplate"> 
    <span>test</span> 
</template> 

<script type="module"> 
    class Item extends HTMLElement { 
     constructor() { 
      let owner = document.currentScript.ownerDocument; 
      let template = owner.querySelector("#itemtemplate"); 
      let clone = template.content.cloneNode(true); 
      let root = this.createShadowRoot(); 
      root.appendChild(clone); 
     } 
    } 
    Item.prototype.createdCallback = Item.prototype.constructor; 
    Item = document.registerElement('x-item', Item); 
</script>

，我沒有錯誤，也沒有我期待什麼被顯示，任何想法，如果這應該實際上工作？

這是如何在ECMA6語法中擴展HTMLElement的？

è：把它完全在一個頁面至少現在我知道它創建一個自定義組件以正確的方式解決問題，但問題是有它在一個單獨的文件，我認爲這與該怎麼辦traceur句柄<link rel="import" href="x-item.html">我試着將類型屬性添加到導入中，但沒有運氣。

來源

2014-12-20 user1492051

而你期望顯示的是......什麼？尋求調試幫助的問題（「**爲什麼不是這個代碼工作？」）必須包括所需的行爲，*特定的問題或錯誤*以及*在問題本身中重現它所需的最短代碼* *。沒有**明確問題陳述**的問題對其他讀者沒有用處。請參閱：[如何創建一個最小，完整和可驗證的示例。]（http://stackoverflow.com/help/mcve） –

@EdCottrell測試 – user1492051

「任何想法，如果這實際上應該工作？」我認爲我們不知道，直到我們有一個符合兩個規範的實施。 – BoltClock

Traceur的內聯處理器似乎不支持在<link import>內尋找<script>標籤。 Traceur的所有代碼似乎直接訪問document，這導致traceur僅查看index.html，並且從未在x-item.html中看到任何<scripts>。這是一個適用於Chrome的解決方法。變化的x item.html爲：

<template id="itemtemplate"> 
    <span>test</span> 
</template> 

<script type="module"> 
(function() { 
    let owner = document.currentScript.ownerDocument; 

    class Item extends HTMLElement { 
     constructor() { 
      // At the point where the constructor is executed, the code 
      // is not inside a <script> tag, which results in currentScript 
      // being undefined. Define owner above at compile time. 
      //let owner = document.currentScript.ownerDocument; 
      let template = owner.querySelector("#itemtemplate"); 
      let clone = template.content.cloneNode(true); 
      let root = this.createShadowRoot(); 
      root.appendChild(clone); 
     } 
    } 
    Item.prototype.createdCallback = Item.prototype.constructor; 
    Item = document.registerElement('x-item', Item); 
})(); 
</script> 

<script> 
// Boilerplate to get traceur to compile the ECMA6 scripts in this include. 
// May be a better way to do this. Code based on: 
// new traceur.WebPageTranscoder().selectAndProcessScripts 
// We can't use that method as it accesses 'document' which gives the parent 
// document, not this include document. 
(function processInclude() { 
    var doc = document.currentScript.ownerDocument, 
     transcoder = new traceur.WebPageTranscoder(doc.URL), 
     selector = 'script[type="module"],script[type="text/traceur"]', 
     scripts = doc.querySelectorAll(selector); 

    if (scripts.length) { 
     transcoder.addFilesFromScriptElements(scripts, function() { 
      console.log("done processing"); 
     }); 
    } 
})(); 
</script>

另一種可能的解決辦法是將ECMA6成ECMA5預編譯和僅包括ECMA5。這將避免traceur在導入中找不到<script>標籤的問題，並且會消除對樣板的需求。

來源

2015-01-01 06:41:33 dbcb

回答

相關問題