与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

回答

相关问题