HTML Living Standard/slot

slot 要素

<slot> 要素は、Web Components において、シャドウ DOM 内に挿入ポイント（スロット）を定義するために使用されます。この要素を使用することで、シャドウ DOM 内のテンプレートと外部の DOM の内容を効率的に組み合わせることができます。

概要

<slot> 要素は、Web Components のシャドウ DOM におけるコンテンツ投影（Content Projection）をサポートします。これにより、シャドウ DOM 内の特定の場所に、外部のコンテンツを挿入することが可能です。

使用例

以下は、<slot> 要素を使用した基本的な例です。

<template id="my-component">
  <style>
    .container {
      border: 1px solid #ccc;
      padding: 10px;
    }
  </style>
  <div class="container">
    <slot></slot>
  </div>
</template>

<script>
  class MyComponent extends HTMLElement {
    constructor() {
      super();
      const template = document.getElementById('my-component').content;
      const shadowRoot = this.attachShadow({ mode: 'open' });
      shadowRoot.appendChild(template.cloneNode(true));
    }
  }
  customElements.define('my-component', MyComponent);
</script>

<my-component>
  <p>ここに挿入される内容です。</p>
</my-component>

この例では、<slot> 要素が <my-component> 内に外部のコンテンツを挿入しています。

属性

<slot> 要素には以下の属性が使用可能です。

name

スロットの名前を指定します。スロットの名前を使用することで、複数の挿入ポイントを識別できます。

使用例

<template id="my-component">
  <div class="header">
    <slot name="header"></slot>
  </div>
  <div class="content">
    <slot></slot>
  </div>
</template>

<my-component>
  <p slot="header">ヘッダーの内容</p>
  <p>メインコンテンツ</p>
</my-component>

DOM インターフェース

<slot> 要素は次の DOM インターフェースを提供します。

プロパティ

name
スロットの名前を取得または設定します。
assignedNodes(options)
スロットに割り当てられたノードのリストを返します。オプションを指定することで、直接の子ノードのみを取得するかどうかを選択できます。

使用例

const slot = document.querySelector('slot');
const nodes = slot.assignedNodes();
console.log(nodes); // 割り当てられたノードを出力

イベント

<slot> 要素は slotchange イベントをサポートします。このイベントは、スロットに割り当てられたコンテンツが変更されたときに発生します。

slot.addEventListener('slotchange', () => {
  console.log('スロットの内容が変更されました。');
});

動作

名前付きスロット
スロットに名前を付けることで、特定のコンテンツを特定のスロットに挿入できます。
デフォルトのコンテンツ
スロットが空の場合、スロット内に記述されたデフォルトのコンテンツが使用されます。

制限事項

シャドウ DOM の外部コンテンツのみがスロットに投影されます。
ネストされたスロットの使用は可能ですが、管理が複雑になる場合があります。

互換性

<slot> 要素はすべてのモダンブラウザーでサポートされています。ただし、シャドウ DOM をサポートしないブラウザーでは動作しないため、必要に応じてフォールバックを実装することを検討してください。