【HTML Living Standard】slot属性の使い方
slot属性の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
slotプロパティは、ウェブコンポーネントのShadow DOMにおいて、外部から与えられたコンテンツをシャドウツリー内の特定の位置に割り当てるための名前を保持するプロパティです。HTMLのグローバル属性の一つとして、任意のHTML要素に指定できます。
このプロパティは、再利用可能なウェブコンポーネントを開発する際に特に重要です。Shadow DOMを使用すると、カスタム要素の内部構造（シャドウツリー）が外部から隔離され、スタイルやスクリプトが互いに影響を与え合うことを防ぐことができます。一方で、カスタム要素の利用者が、その内部構造の一部に独自のコンテンツを挿入したいというニーズが発生します。
このような場合、シャドウツリー内では<slot>要素を配置し、そのname属性でスロットの名前を定義します。そして、カスタム要素に挿入したいコンテンツを持つ要素に対して、その<slot>要素のname属性値と同じ値をslotプロパティとして指定します。これにより、指定されたコンテンツはシャドウツリー内の対応する<slot>要素の位置に挿入され、表示されるようになります。
例えば、<my-component>というカスタム要素が内部に「header」と「body」という名前のスロットを持つ場合、<div slot="header">タイトル</div>や<p slot="body">本文です</p>のように指定することで、それぞれの要素が対応するスロットに正確に配置されます。slotプロパティは、コンポーネントの内部構造と外部コンテンツを柔軟に連携させ、拡張性の高いコンポーネントを設計するために不可欠な機能です。
構文(syntax)
1<div slot="my-content-slot">これはカスタム要素のスロットに挿入されるコンテンツです。</div>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません