如何在模板中使用自定义元素？

Question

我试图了解网络组件的工作原理，所以我尝试编写一个在网络服务器上提供服务的小应用程序（在支持 rel="import"):

的 Chrome 上测试

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="import" href="my-app.html" />
  </head>
  <body>
    <my-app />
  </body>
</html>

my-app.html:

<template id="template">
  <div>Welcome to my app!</div>
</template>

<script>
class MyApp extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({mode: "open"});
    const template = document.getElementById("template");
    const clone = document.importNode(template.content, true);
    shadow.appendChild(clone);
  }
}
customElements.define("my-app", MyApp);
</script>

但是好像不行。 <my-app /> 标签在 DOM 中根本没有呈现，我在控制台上收到此错误：

Uncaught TypeError: Cannot read property 'content' of null

我无法检索 template 节点的是什么？我做错了什么？

我还想知道是否允许我编写没有样板代码（doctype、head、body...）的 HTML 文档，因为它旨在描述组件和不是要按原样使用的整个文档。 HTML5 规范是否允许 and/or 它是否被大多数浏览器正确解释？

感谢您的帮助。

Answer 1

在模板内部时，不要使用 document 全局：

<template id="template">
  <div>Welcome to my app!</div>
</template>

<script>
class MyApp extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({mode: "open"});

    // while inside the imported HTML, `currentDocument` should be used instead of `document`
    const currentDocument = document.currentScript.ownerDocument;
    // notice the usage of `currentDocument`
    const template = currentDocument.querySelector('#template');

    const clone = document.importNode(template.content, true);
    shadow.appendChild(clone);
  }
}
customElements.define("my-app", MyApp);
</script>

Plunker 演示：https://plnkr.co/edit/USvbddEDWCSotYrHic7n?p=preview

PS：Notes com 兼容性，但我假设您知道 HTML 导入将很快被弃用。

如何在模板中使用自定义元素？

How to use Custom Elements with template?

html

web-component

custom-element

html-templates