Webコンポーネントとカスタム要素の違いは何ですか？

「Webコンポーネント」と「カスタム要素」はしばしば混同され、この質問のタイトルのWeb検索では、まだあまり明確になりません。それを修正しましょう。

カスタム要素は、シャドウDOM、テンプレート、HTMLインポートとともに、Webコンポーネント標準の仕様部分です。

仕様から：

カスタム要素は、作成者が完全な機能を備えた独自のDOM要素を作成する方法を提供します。作成者は常にドキュメント内で非標準の要素を使用できますが、アプリケーション固有の動作はスクリプトなどによって事後に追加されますが、そのような要素は歴史的に不適合であり、あまり機能的ではありません。作成者は、カスタム要素を定義することにより、要素を適切に構築する方法と、そのクラスの要素が変更にどのように反応するかをパーサーに通知できます。

歴史

仕様は現在v1です。以前のバージョンで、V0は、サポートされていたクロム33以降、及び使用して、別のAPIを持っていたdocument.registerElement-これはされて、今は非推奨します。

使用法

カスタム要素は、自律型（ゼロから新しい要素を作成する（つまりHTMLElementを拡張する））か、既存のHTML要素（HTMLButtonElementなど）をカスタマイズできます。

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

customElements.define()呼び出しの2番目のパラメーターは、要素の動作を実装するクラスの名前です。自律要素およびカスタマイズされた組み込み要素については、仕様の例を参照してください。

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

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

カスタム要素は、一部の最新のブラウザーでネイティブにサポートされており、Safari 7以降およびIE11に戻る古いブラウザー用にポリフィルできます。v1 polyfillも参照してください。

テンプレートとシャドウDOM

カスタム要素でテンプレートとシャドウ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コンポーネント