Web组件和自定义元素之间有什么区别？

“ Web组件”和“自定义元素”通常混在一起，并且在网络上搜索此问题的标题尚不清楚。让我们修复它。

自定义元素以及Shadow DOM，模板和HTML导入是Web组件标准的规范部分。

从规格：

自定义元素为作者提供了一种构建自己的功能齐全的DOM元素的方法。尽管作者总是可以在其文档中使用非标准元素，但在事后通过脚本或类似方式添加了特定于应用程序的行为，但这些元素历来是不合格且功能不大的。通过定义自定义元素，作者可以通知解析器如何正确构造元素以及该类的元素应如何对更改做出反应。

历史

现在该规范位于v1。自Chrome 33以来，以前的版本v0已受支持，并且使用document.registerElement- （现在已不推荐使用）具有不同的API 。

用法

自定义元素可以是自主的（从头开始创建新元素（即，扩展HTMLElement），也可以自定义现有的HTML元素（例如HTMLButtonElement）。

// autonomous element
customElements.define("flag-icon", FlagIcon);
// customized <button> element
customElements.define("plastic-button", PlasticButton, { extends: "button" });

customElements.define()调用的第二个参数是实现元素行为的类的名称。请参阅规范中的示例，以了解自治元素和自定义内置元素。

class PlasticButton extends HTMLButtonElement {
  constructor() {
    super();

    this.addEventListener("click", () => {
      // Draw some fancy animation effects!
    });
  }
}

自定义元素在某些现代浏览器中本身受支持，并且可以回填到Safari 7+和IE11之前的旧版浏览器中。另请参见v1 polyfill。

模板和Shadow DOM

通过在自定义元素中使用模板和Shadow DOM，可以使元素更易于处理和重用。

模板允许使用HTML声明自定义元素的结构：

<!-- Template Definition -->
<template id="fancy-element-template">
  <style>
    ...
  </style>
  <div id="container">
    <p>Some fancy markup goes here...</p>
  </div>
</template>

<!-- Custom Element usage -->
<fancy-element></fancy-element>

Shadow DOM允许将内容的样式，ID和类限定于自身。这样可以防止CSS流血或从外部访问自定义元素的内部。

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

学到更多

Google Developers文章：

• 自定义元素v1：可重复使用的Web组件
• Shadow DOM：独立的Web组件