1

索引.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：将它完全放在一个页面中至少现在可以解决问题我知道它是创建自定义组件的正确方法，但问题是将它放在一个单独的文件中我认为这与<link rel="import" href="x-item.html">我尝试添加的跟踪器处理方式有关输入的类型属性没有运气。

4

1 回答 1

1

Traceur 的内联处理器似乎不支持<script>在<link import>. 所有 traceur 的代码似乎都可以document直接访问，这导致 traceur 只查看 index.html 而看不到<scripts>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>

另一种可能的解决方案是将 ECMA6 预编译为 ECMA5 并仅包含 ECMA5。这将避免 traceur 在导入中找不到<script>标签的问题，并消除对样板的需求。

于 2015-01-01T06:41:33.833 回答