具有ECMA6的Web组件

Question

index.html 的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>

and my web component: x-item.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>

and I get no error nor what I expect to be displayed, any idea if this should actually work? 而且我没有错误，也没有期望显示的内容，是否可以正常工作？

Is this how one would extend an HTMLElement in ECMA6 syntax? 这就是用ECMA6语法扩展HTMLElement的方式吗？

E : putting it altogether in one page solves the problem at least now I know its the right way to create a custom component, but the problem is having it in a separate file I think it has to do with how traceur handles <link rel="import" href="x-item.html"> I tried adding the type attribute to the import with no luck. E ：将其全部放在一页中至少可以解决该问题，至少现在我知道它是创建自定义组件的正确方法，但是问题是将其保存在单独的文件中，我认为它与traceur的处理方式有关<link rel="import" href="x-item.html">我尝试将type属性添加到导入中而没有运气。

Answer 1

Traceur's inline processor does not appear to have support for finding <script> tags inside <link import> . Traceur的嵌入式处理器似乎不支持在<link import>查找<script>标签。 All of traceur's code seems to access document directly, which results in traceur only looking at index.html and never seeing any <scripts> inside x-item.html. Traceur的所有代码似乎都直接访问document ，这导致Traceur仅查看index.html，而在x-item.html中却看不到任何<scripts> 。 Here's a work around that works on Chrome. 可以在Chrome上解决此问题。 Change x-item.html to be: 将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>

Another possible solution would be to pre-compile the ECMA6 into ECMA5 and include the ECMA5 only. 另一种可能的解决方案是将ECMA6预编译为ECMA5，并且仅包含ECMA5。 This would avoid the problem of traceur not finding the <script> tags in the import and would remove the need for the boilerplate. 这样可以避免traceur在导入中找不到<script>标记的问题，并且不需要样板。

具有ECMA6的Web组件

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-01-01 06:41:33

具有ECMA6的Web组件

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-01-01 06:41:33

解决方案1
1 已采纳 2015-01-01 06:41:33