Web コンポーネント: 概要-jsチュートリアル-php.cn

現代の Web 開発では、フレームワークが大流行しています。ほとんどすべての最新のフレームワークにはコンポーネントの概念があります。コンポーネントの背後にある考え方は、フロントエンドロジックを、ページまたはプロジェクト間で共有できる、再利用可能な小さなチャンクに分割することです。一般に、これらのコンポーネントは他のフレームワークでは再利用できず、ブラウザで実行できる JavaScript にコンパイルするためのビルドプロセスが必要になります。

バニラ JavaScript と、フレームワーク間で共有できる広く利用可能なブラウザ API を使用してコンポーネントを構築する方法があると言ったらどうなるでしょうか? これが Web コンポーネントで現実になります。ここでは、さまざまな種類の Web コンポーネントと、それらを使用して活用できる機能の一部を簡単に見ていきます。

Web コンポーネントの基本

Web コンポーネントは、カスタム要素レジストリを使用して定義されます。これは、最新のブラウザーのほとんどが提供する API です。 Web コンポーネントを作成するには、コードで定義し、カスタム要素レジストリに登録するだけです。正しい命名規則を使用してコンポーネントを登録および定義すると、そのコンポーネントをページ内で使用できるようになります。

customElements.define("my-component", MyComponentClass);

ログイン後にコピー

Web コンポーネントの種類

Web コンポーネントは 2 つの異なるカテゴリに分類できます。これらは、自律 Web コンポーネント と カスタム組み込み要素 です。

Autonomous Web Components は、汎用 HTMLElement クラスの拡張です。これらのコンポーネントは、基本的にすべての動作をゼロからカスタマイズできる独自の HTML 要素を構築するため、一般に柔軟性が高くなります。これには、コンポーネントのレンダリングに使用されるルート要素が含まれます。 Autonomous Web コンポーネントを定義したら、他の HTML 要素と同じように使用します。

<my-button>



<p><strong>Custom Built-In Elements</strong> extend specific HTML elements.  For example, you may extend the HTMLButtonElement class or the HTMLAnchorElement.  These are meant to augment the functionality of existing HTML elements. To use a Custom Built-In element, you use the "is" attribute on the HTML element you are augmenting to tell it that it is an instance of the Web Component.<br>
</p>

<pre class="brush:php;toolbar:false"><button is="my-button">



<h3>
  
  
  Naming Web Components
</h3>

<p>When defining a Web Component, there are certain conventions that must be followed.  </p>

<p>Generally you will name your components similar to HTML elements with your own prefix attached to keep things simple (i.e. <my-button>).  The basic rules require that the element name start with a lowercase letter, and it must include a hyphen.  These guidelines will get you by for most cases, but I would recommend looking at the HTML spec if you're curious about all rules.<br>


<pre class="brush:php;toolbar:false"><!--Valid-->
<my-button/>
<your-button/>

<!--Invalid-->
<My-button/>
<1234-button/>
<Mybutton/>

ログイン後にコピー

ライフサイクルフック

Web コンポーネントには、コンポーネントが通過するさまざまなフェーズに反応するために使用される特定のライフサイクルフックがあります。フックは次のとおりです:

connectedCallback ->コンポーネントが DOM にアタッチされるときに実行されます。
切断されたコールバック ->コンポーネントが DOM から切り離されたときに実行されます。
採用コールバック ->コンポーネントが新しい DOM にアタッチされるたびに実行されます。
attributeChangedCallback -> 「observedAttributes」のリストの属性が更新されたときに実行されます。

class MyComponent extends HTMLElement {
    static observedAttributes = ["btntype"]
    connectedCallback() {
        // Handle when the component is attached to the DOM
    }
    disconnectedCallback() {
        // Handle when the component is removed from the DOM
    }
    adoptedCallback() {
        // Handle when the component is attached to a new DOM
    }
    attributeChangedCallback(name, oldValue, newValue) {
        // Trigged when the "btntype" attribute is changed since it is in the list of observedAttributes.
        // "name" will be the name of the attribute that changed.
        // "oldValue" is the value before the change.
        // "newValue" is the new value after the change.
    }
}

ログイン後にコピー

これらのライフサイクルフックは、コンポーネントインスタンスの作成/破棄時に必要な初期化またはクリーンアップ作業を実行するために使用されます。 attributeChangedCallback は、属性値の更新に反応できるため、特に便利です。 Web コンポーネントには、「observedAttributes」と呼ばれる特別な静的属性があります。これは、attributeChangedCallback をトリガーする属性名 (文字列) の配列であることを意味します。

アクセシビリティ

アクセシビリティは、今日行われているあらゆる Web 開発において重要な考慮事項です。 Web コンポーネントに関しては、通常の HTML やフレームワークと同じように ARIA 属性を使用しますが、一般的には、使用している HTML 要素の組み込みロールとアクセシビリティ機能を継承します。

ここでも、他の場所と同じガイドラインがすべて適用されます。たとえば、コンポーネントを構築するときにセマンティック HTML を使用していることを確認し、必要なキーボード処理を追加し、フォーカスや色のコントラストなどが適切に管理されていることを確認してください。

シャドウ DOM

Shadow DOM は、おそらく Web コンポーネントの中で最も混乱し、物議を醸す部分です。 Shadow DOM は基本的に、Web コンポーネント

内に存在する DOM のスコープが個別に設定された部分です。

カスタム組み込み要素は既存の HTML 要素に追加されるだけであるため、Shadow DOM は主に Autonomous Web コンポーネントにとって懸念事項です。 Autonomous Web コンポーネントの場合、要素を表すカスタムタグ (つまり、) は「host」要素とみなされます。ホスト要素内には「シャドウルート」があります。シャドウルート内では、コンポーネントのマークアップがレンダリングされます。

これは、ホストとして「my-button」要素が表示され、内部に Shadow DOM が含まれる例です。

Web Components: An Introduction

Web コンポーネントを構築する場合、Shadow DOM を設定できるモードが 2 つあります。これらのモードには「オープン」と「クローズ」があります。開いている Shadow DOM には、Light DOM の Shadow Root の外側で JavaScript を使用してアクセスできますが、閉じた Shadow DOM にはアクセスできません。

customElements.define("my-component", MyComponentClass);

ログイン後にコピー

Shadow DOM 内で定義したスタイルはすべて Shadow DOM 内にスコープされ、ドキュメントの残りの部分を汚染しません。「Light DOM」(ドキュメントの残りの部分) で定義されたスタイルは、Shadow DOM には浸透しません (CSS 変数は例外ですが、ここでは触れません)。最新のブラウザでは、パーツを使用した CSS を使用して Light DOM から直接 Shadow DOM をターゲットにする方法が提供されています。マークアップにパーツ属性を追加することで、コンポーネントの Shadow DOM にパーツを追加できます。これらのパーツは、::part 疑似セレクターを使用して CSS でターゲットにすることができます。これは非常に便利ですが、性質上かなり制限があります。 ::part セレクターから子セレクターをチェーンすることはできません。 Shadow DOM 内の「part」属性を持つ特定の要素のみをターゲットにできます。

Shadow DOM を使用する場合、アクセシビリティも重要な考慮事項です。 ARIA 属性を使用したことがある場合は、「aria-describeby」と「aria-labelledby」に精通しているでしょう。これらには通常、スクリーンリーダー用のコンテンツのラベルまたは説明を含む別の要素を参照する ID が与えられます。 Shadow DOM は、スタイルと同様に ID のスコープを個別に保持するため、Shadow DOM 内に存在する ID を Light DOM から参照したり、その逆を行うことはできません。これは、動的に提供する必要がある詳細な説明を提供しようとするときに課題となる可能性がありますが、回避策は存在しますが、この紹介では詳しく説明しません。

テンプレートとスロット

テンプレートとスロットは、Shadow DOM と組み合わせて使用して Web コンポーネントを強化できるツールです。テンプレートは Web コンポーネント内で再利用可能なスニペットを作成するために使用され、スロットは Light DOM のコンテンツを渡すことができる「ホール」を公開するために使用されます。

Web コンポーネント内で何度もレンダリングする必要がある HTML のスニペットがある場合、テンプレートは便利です。これらは Web コンポーネントの外部でも使用できますが、使用例はより限定されます。これらは「template」タグを使用して実装されます。

スロットは、Light DOM から Web コンポーネントにコンテンツを渡すために使用され、「slot」タグを使用して実装されます。これは、動的コンテンツを渡す必要がある汎用コンポーネントがある場合に便利です。良い例としては、カードの本体にマークアップを渡すためにスロットを公開できる汎用カードコンポーネントが挙げられます。スロットには、スロットを一意に識別するために指定できる「name」属性があります。これは、Web コンポーネントに複数のスロットを配置する必要がある場合に便利です。コンテンツを渡すとき、slot="your-slot-name" の値を持つ属性を渡すだけで、コンテンツは一致する名前のスロットに渡されます。

スロットと Shadow DOM には、注目に値する独特の相互作用があります。スロットには、何も渡されない場合にレンダリングされるデフォルトのコンテンツを含めることができます。スロットに渡されたコンテンツは Light DOM 内に存在し、Shadow DOM に「浅くコピー」されます。これはブラウザのインスペクタで視覚的に確認できます。スロットのコンテンツは Web コンポーネント内でレンダリングされますが、DOM では、コンテンツは技術的には Web コンポーネントの外に存在し、スロットへのリンクを提供します。

Web Components: An Introduction

これは、すべてのスロットコンテンツが Light DOM 内の他のコンテンツと同様にスタイル設定され、参照されることを意味します。 Light DOM 内のスタイルはスロットの内容に影響しますが、Shadow DOM スタイルは影響しません。 Web コンポーネント内からスロットコンテンツを操作するために使用できる API があります。

Web コンポーネントのサポート

Web コンポーネントは、最新のブラウザーでかなりよくサポートされています。主な例外は Safari で、カスタム組み込み要素はサポートされていません。 Internet Explorer 11 などの古いブラウザをサポートする必要がある場合は、いくつかの要素をポリフィルする必要があります。

基本的な例

すべての基本概念を簡単に紹介したので、いくつかの例を見てみましょう。

自律的なカスタム要素

これは、「my-button」と呼ばれる自律カスタム要素の例です。

customElements.define("my-component", MyComponentClass);

ログイン後にコピー

最初に気づくのは、コードがほとんど同じであるということです。最大の違いは、HTMLButtonElement を直接拡張し、カスタム要素を定義するときにボタンを拡張することも宣言していることです。

要素をレンダリングするためのコードを書き出す時間も大幅に短縮されます。 HTMLButtonElement を拡張しているため、コンポーネントは追加の機能を備えた単なる HTML ボタンです。 HTML の「is」属性を使用して、HTML ボタンにそれが「my-button」であることを伝えます。

ライブの例は次のとおりです:

ここでも、「is」属性を使用して既存の HTML ボタン要素を拡張していることに気づくでしょう。また、Autonomous カスタム要素と同様に、他の HTML 要素と同じようにイベントリスナーをアタッチしてボタンを操作できることにも気づくでしょう。文字通り、拡張された HTML ボタンであるため、ここではどちらにしてもこれが理にかなっています。

まとめ

Web コンポーネントは、さまざまなページやプロジェクト間で再利用できる共有可能なコンポーネントを作成するという問題を解決する標準的な方法です。これらは通常の HTML 要素と同じように機能するため、混乱が生じる可能性がありますが、最終的には非常に便利で、最新のフレームワークが対象としているのと同じ問題の多くを解決するのに役立ちます。

ここでは、Web コンポーネント、その周囲のさまざまな概念、およびその基本機能を示すいくつかの簡単な例について非常に入門的に説明しました。ここから、それらの構築と使用を簡単にする方法をさらに深く掘り下げて、いくつかの問題点に対処する方法を検討していきます。

ご興味がございましたら、GitHub でサンプルをご覧ください。また、コードペンで試してみることもできます。