Web Components：カスタム要素、Shadow DOM とカプセル化の境界

概要

Web Components は、ブラウザーの三つの機能から成ります。カスタム要素：HTMLElement を継承するクラスを customElements.define("x-name", Class) で登録します（名前にはハイフンが必要です）。connectedCallback、disconnectedCallback と、静的な observedAttributes 配列に列挙した属性のための attributeChangedCallback を持ちます。Shadow DOM：attachShadow({ mode: "open" }) が要素に専用の部分木を与えます。MDN は内部のスタイルの適用範囲がその木に限定され、ページのスタイルはシャドウ要素に、シャドウのスタイルはページに影響しないとしています。<slot> は light DOM の子をその中へ投影します。テンプレート：<template> は不活性なマークアップを保持し、<template shadowrootmode="open"> はサーバーでレンダリングされた HTML にスクリプトなしでシャドウルートを宣言します。

重要性

カスタム要素は、ブラウザー自体が理解する唯一のコンポーネントモデルです。どのフレームワークでも、フレームワークなしでも動き、フレームワークの移行を経ても使え、通常のサーバーでレンダリングされた HTML から利用できます。その代わり、カプセル化は実在します。境界を越えるすべての事項（テーマ、フォーム、ラベル、フォーカス、イベント）に、明示的な開口部が必要です。

適用方法

• スタイルを設定する面を意図的に公開します。値にはカスタムプロパティー（シャドウツリー内へ継承されます）を使い、内部要素には part="label" を設定して、ページから x-name::part(label) と書けるようにします。MDN は part を、シャドウ要素を親 DOM から見えるようにするものと説明しています。
• static formAssociated = true と ElementInternals（setFormValue、setValidity）で、フォームコントロールを実際にフォームへ参加させます。これがなければカスタム入力は値を送信しません。
• 自律型カスタム要素を優先します。MDN は Safari がカスタマイズされた組み込み要素（is="..."）をサポートする予定はないと述べています。
• 初回描画やクローラーが重要な場合は、宣言的 Shadow DOM で初期状態を描画し、その後クラスでアップグレードします。
• 重要な状態を属性に反映し、CSS やテストがそれを条件に選択できるようにします。mode: "open" を維持します。MDN は closed モードが強力なセキュリティー機構ではなく、単なる意思表示だとしています。
• スクリプトが動く前の x-name:not(:defined) にスタイルを設定し、アップグレード時に内容が跳ねないようにします。

落とし穴

ID 参照は境界を越えません。ページの <label for> や aria-labelledby はシャドウ内部の入力を参照できないため、light DOM からスロットでコントロールを入れるか、内部でラベルを付けます。グローバルなリセット、ユーティリティークラス、アイコンのスプライトは内部に適用されません。カスタムイベントを外側で受け取るには composed: true が必要です。同じ名前を二度登録すると例外になるため、二つのバンドルが同じコンポーネントを含むと問題になります。開発者ツールはシャドウツリーを表示しますが、document.querySelector は対象にしません。