Question

的index.html

<!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>

和我的网络组件：的的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的吗？

E ：将它完全放在一个页面中解决问题至少现在我知道它是创建自定义组件的正确方法，但问题是将它放在一个单独的文件中我认为它有跟踪traceur如何处理<link rel="import" href="x-item.html">我尝试将type属性添加到导入中，但没有运气。

Answer 1

Traceur的内联处理器似乎不支持在<script>内找到<link import>标记。所有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>标签的问题，并且不再需要样板文件。

带有ECMA6的Web组件

1 个答案: