HTML/SLOT

SLOT要素

<slot>要素は、Web Componentsにおける重要な機能であるShadow DOMを使用したコンテンツ分配を可能にするための要素です。Shadow DOMはカプセル化されたDOM構造を提供しますが、その中に外部からのコンテンツを柔軟に挿入するためには、<slot>要素が必要です。この章では、<slot>要素の基本的な使い方から高度なテクニックまでを解説します。

基本的な使い方

<slot>要素は、Shadow DOMの中で使用されます。外部のコンテンツ（"ライトDOM"）を特定の箇所に挿入する役割を果たします。

例:

<template id="my-component">
  <style>
    p {
      color: blue;
    }
  </style>
  <p><slot></slot></p>
</template>

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

  customElements.define('my-component', MyComponent);
</script>

<my-component>
  こんにちは、世界！
</my-component>

この例では、<slot>要素がShadow DOM内で使用され、外部から提供された"こんにちは、世界！"がその場所に挿入されます。

名前付きスロット

デフォルトのスロットではなく、特定の名前を持つスロットを定義することで、複数のコンテンツを異なる場所に挿入できます。

例:

<template id="named-slots">
  <div>
    <header><slot name="header"></slot></header>
    <main><slot></slot></main>
    <footer><slot name="footer"></slot></footer>
  </div>
</template>

<script>
  class NamedSlots extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });
      const template = document.getElementById('named-slots');
      shadow.appendChild(template.content.cloneNode(true));
    }
  }

  customElements.define('named-slots', NamedSlots);
</script>

<named-slots>
  <span slot="header">ヘッダーコンテンツ</span>
  <p>メインコンテンツ</p>
  <span slot="footer">フッターコンテンツ</span>
</named-slots>

この例では、slot="header"およびslot="footer"が指定されているコンテンツが、それぞれ対応する<slot>要素に挿入されます。

デフォルトコンテンツ

スロットに対応するコンテンツが提供されない場合、<slot>要素内に記述されたデフォルトコンテンツが表示されます。

例:

<template id="default-slot">
  <p><slot>デフォルトのコンテンツ</slot></p>
</template>

<script>
  class DefaultSlot extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });
      const template = document.getElementById('default-slot');
      shadow.appendChild(template.content.cloneNode(true));
    }
  }

  customElements.define('default-slot', DefaultSlot);
</script>

<default-slot></default-slot>

この例では、<default-slot>内にコンテンツが提供されないため、"デフォルトのコンテンツ"が表示されます。

グローバル属性

<slot>要素は通常のHTML要素と同様に、グローバル属性（class、id、styleなど）を使用できますが、それらはスロット自体に適用されます。スロット内のコンテンツには影響しません。

例:

<template id="styled-slot">
  <slot class="highlight"></slot>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</template>

<script>
  class StyledSlot extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });
      const template = document.getElementById('styled-slot');
      shadow.appendChild(template.content.cloneNode(true));
    }
  }

  customElements.define('styled-slot', StyledSlot);
</script>

<styled-slot>
  <p>スタイルが適用されるべきではないコンテンツ</p>
</styled-slot>

この例では、<slot>要素自体にスタイルが適用されますが、スロット内のコンテンツには影響しません。

まとめ

<slot>要素は、Shadow DOMを活用するWeb Componentsにおいて、外部コンテンツをカプセル化されたDOMに柔軟に挿入するための強力なツールです。名前付きスロットやデフォルトコンテンツを活用することで、より複雑で再利用可能なコンポーネントを構築できます。