web-dev-qa-db-ja.com

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

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

javascriptweb-developmentdomcomponent
14
Dan Dascalescu

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

スペックから：

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

歴史

現在、仕様は v1 にあります。以前のバージョンのv0はサポートされていました Chrome 以降）、および_document.registerElement_-which is を使用する別のAPIがありました=現在 非推奨 。

使用法

カスタム要素は自律的（最初から新しい要素を作成する（つまり、拡張 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に戻る古いブラウザーでは polyfilled にすることができます。 v1 polyfill も参照してください。

テンプレートとShadow 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の記事：

14
Dan Dascalescu