не установлены веб-компонент с ECMA6

index.htmlне установлены веб-компонент с ECMA6

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

и мой веб-компонент: х-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>

и я получаю сообщение об ошибке не, ни то, что я рассчитывать на отображаться, любая идея, если это действительно должно работать?

Это как можно расширить HTMLElement в синтаксисе ECMA6?

E: положить его полностью на одной странице решает эту проблему по крайней мере, теперь я знаю, что его правильный способ создания пользовательского компонента, но проблема имея его в отдельном файле, я думаю, что он должен делать с тем, как traceur handle <link rel="import" href="x-item.html"> Я попробовал добавить атрибут type к импорту без везения.

источник

2014-12-20 user1492051

И что вы ожидаете увидеть ... что? Вопросы, требующие помощи по отладке («** почему этот код не работает? **)) должны включать в себя желаемое поведение, * конкретную проблему или ошибку * и * кратчайший необходимый код * для воспроизведения ** в самом вопросе * *. Вопросы без ** ясного заявления о проблеме ** не полезны для других читателей. См.: [Как создать минимальный, полный и проверенный пример.] (Http://stackoverflow.com/help/mcve) –

@EdCottrell test – user1492051

«любая идея, если это действительно должно работать?» Я не думаю, что мы можем знать, пока у нас не будет соответствующей реализации обеих спецификаций. – BoltClock

Встроенный процессор Traceur, похоже, не поддерживает поиск <script> тегов внутри <link import>. Весь код traceur, похоже, напрямую обращается к document, что приводит к тому, что traceur просматривает только index.html и никогда не видит <scripts> внутри x-item.html. Вот работа, которая работает в Chrome. Изменение х-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. Это позволит избежать проблемы трассировки, не обнаруживая теги <script> при импорте и устранит необходимость в шаблоне.

источник

2015-01-01 06:41:33 dbcb

не установлены веб-компонент с ECMA6

ответ

Смежные вопросы