Web组件(香草，无聚合物)：如何加载<template>内容？

我是Web组件的新手。我检查了一些示例，但我真的不知道如何加载(在 DOM 中插入(单独 Web 组件的内容。从这个例子开始，我把这段代码放在一个名为my-element.html的文件中：

<template id="my-element">
  <p>Yes, it works!</p>
</template>
<script>
    document.registerElement('my-element', class extends HTMLElement {
      constructor() {
      super(); 
      let shadowRoot = this.attachShadow({mode: 'open'});
      const t = document.querySelector('#my-element');
      const instance = t.content.cloneNode(true);
      shadowRoot.appendChild(instance);
    }
});
</script>

这是我的索引.html：

<!doctype html> 
<html>
 <head>
   <meta charset="utf-8">
   <title>my titile</title>
   <link rel="import" href="my-element.html">
</head>
<body>
  Does it work?
  <my-element></my-element>
</body>
</html>

我使用的是最新的Chrome 56，所以我不需要polyfill。我运行 polyserve，只出现"它有效吗？我尝试(像原始示例一样("customElements.define"语法而不是"document.registerElement"，但不起作用。你有什么想法吗？如果我不想使用影子 dom，我有什么要改变的？

谢谢

这是因为当你这样做时：

document.querySelector( '#my-element' );

。document是指主文档索引.html

如果要获取模板，则应改为使用 document.currentScript.ownerDocument

var importedDoc = document.currentScript.ownerDocument;
customElements.define('my-element', class extends HTMLElement {
      constructor() {
          super(); 
          let shadowRoot = this.attachShadow({mode: 'open'});
          const t = importedDoc.querySelector('#my-element');
          const instance = t.content.cloneNode(true);
          shadowRoot.appendChild(instance);
    }
});

请注意，document.currentScript 是一个全局变量，因此它仅在当前解析时引用导入的文档。这就是为什么它的值保存在变量中(这里：importedDoc(以便以后(在constrcutor调用中(重用

如果您有多个导入的文档，您可能希望将其隔离在闭包中(如本文所述(：

( function ( importedDoc )
{
    //register element
} )(document.currentScript.ownerDocument);

相关内容

最新更新

热门标签：