具有ECMA6的Web組件

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的嵌入式處理器似乎不支持在<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>標記的問題，並且不需要樣板。

具有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