你的前端框架要被 Web 组件取代了(12)

这里使用 innerHTML 将两个模板放置在元素的影子根中。一开始两个模板都会被隐藏，只渲染容器。在 connectedCallback 中，我们使用 this.shadowRoot.querySelector(’＃view1’) 获取 #view1 中的内容。模板的 content 属性将模板的内容作为 DocumentFragment 返回，可以使用 appendChild 将其添加到另一个元素。由于 appendChild 将移动 DOM 中已经存在的元素，我们需要首先使用 cloneNode(true) 克隆它。否则，模板的内容将被移动而不是附加，这意味着我们只能使用它一次。
模板可以方便地用来快速更改大部分 HTML 或复用标记。它们不仅限于 Web Components，还可以在 DOM 中的任何位置使用。
扩展原生元素到目前为止，我们一直在扩展 HTMLElement 以创建一个全新的 HTML 元素。自定义元素还允许扩展原生内置元素，从而可以增强现有的 HTML 元素，例如图像和按钮。在撰写本文时，此功能仅被 Chrome 和 Firefox 支持。
扩展现有 HTML 元素的好处是继承了元素的所有属性和方法。这样就能逐步增强现有元素了，意味着即使元素在不支持自定义元素的浏览器中加载也仍然是可用的。此时它将简单地回退到其默认的内置行为，而如果它是一个全新的 HTML 标签就彻底不可用了。
举个例子，假设我们要增强 HTML <button>元素：
class MyButton extends HTMLButtonElement { ... constructor() { super(); // always call super() to run the parent's constructor as well } connectedCallback() { ... } someMethod() { ... }} customElements.define('my-button', MyButton, {extends: 'button'});
我们的 Web 组件现在扩展了 HTMLButtonElement，而不是更通用的 HTMLElement。对 customElements.define 的调用现在还需要一个额外的参数{extends：‘button’}来表示我们的类扩展了<button>元素。这似乎是多余的，因为我们已经指出我们想要扩展 HTMLButtonElement，但是由于存在共享相同 DOM 接口的元素，所以这是必要的。例如，<q>和<blockquote>都共享 HTMLQuoteElement 接口。