Question

我是网络组件的新手。我查了一些例子，但我真的无法弄清楚如何加载（插入DOM）一个单独的Web组件的内容。从this示例开始，我将此代码放在名为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>

这是我的index.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，只有＆＃34;它有效吗？＆＃34;出现。我试过（像原来的例子）＆＃34; customElements.define＆＃34;语法而不是＆＃34; document.registerElement＆＃34;，但不会起作用。你有什么想法吗？如果我不想使用影子dom，我还能改变什么？

感谢

Answer 1

这是因为当你这样做时：

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

... document指的是主文档 index.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调用中）

如果您有多个导入的文档，您可能希望在闭包中将其隔离（如in this post所述）：

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

web组件（香草，没有聚合物）：如何加载<template>内容？

1 个答案: