Javascript 使用ECMA6的web组件

index.html

traceur.options.experimental=true；

和我的web组件： x-item.html

测试
类项扩展HtmleElement{
构造函数（）{
让所有者=document.currentScript.ownerDocument；
让template=owner.querySelector（“#itemtemplate”）；
让clone=template.content.cloneNode（true）；
让root=this.createShadowRoot（）；
root.appendChild（克隆）；
}
}
Item.prototype.createdCallback=Item.prototype.constructor；
项目=文件注册表项（“x项目”，项目）；

---

我没有得到任何错误，也没有得到我希望显示的内容，知道这是否真的有效吗

这就是用ECMA6语法扩展HTMLElement的方式吗

---

E：将其全部放在一个页面中解决了问题至少现在我知道创建自定义组件的正确方法，但问题是将它放在一个单独的文件中，我认为这与traceur如何处理

有关。我尝试将type属性添加到导入中，但运气不佳。

traceur的内联处理器似乎不支持在

中查找

标记。traceur的所有代码似乎都直接访问

文档

，这导致traceur只查看index.html，而从未在x-item.html中看到任何

。这是一个在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>

测试
（功能（）{
让所有者=document.currentScript.ownerDocument；
类项扩展HtmleElement{
构造函数（）{
//在执行构造函数时，代码
//不在标记内，这将导致currentScript
//未定义。在编译时定义上面的所有者。
//让所有者=document.currentScript.ownerDocument；
让template=owner.querySelector（“#itemtemplate”）；
让clone=template.content.cloneNode（true）；
让root=this.createShadowRoot（）；
root.appendChild（克隆）；
}
}
Item.prototype.createdCallback=Item.prototype.constructor；
项目=文件注册表项（“x项目”，项目）；
})();
//让traceur编译本文件中的ECMA6脚本的样板文件。
//这可能是一个更好的方法。代码基于：
//新建traceur.WebPagetTranscoder（）。选择并处理脚本
//我们不能使用该方法，因为它访问“document”，该“document”提供了父级
//文档，但不包括此文档。
（函数processInclude（）{
var doc=document.currentScript.ownerDocument，
transcoder=新的traceur.WebPagetTranscoder（doc.URL），
选择器='script[type=“module”]，script[type=“text/traceur”]，
脚本=doc.querySelectorAll（选择器）；
if（scripts.length）{
transcoder.addFilesFromScriptElements（脚本，函数（）{
console.log（“完成处理”）；
});
}
})();

---

另一种可能的解决方案是将ECMA6预编译为ECMA5，并仅包括ECMA5。这将避免traceur在导入中找不到

标记的问题，并消除对样板文件的需要。

并且您希望显示的是。。。什么？寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请看：“你知道这是否真的有效吗？”我不认为我们能知道，直到我们有一个符合这两个规范的实现。我不相信你会有很多运气尝试扩展

HTMLElement

@torazaburo它实际上是可能的，我可以用ecma5做，所以它应该可以用ecma6，除非我遗漏了什么，我不知道在上述语法中有任何traceur不支持的东西，问题是根本没有错误，什么都没有。当您检查DOM时，您看到了什么？