HTML Living Standard/slot属性

slot属性

slot属性は、Web Componentsの一部であるシャドウDOMにおいて、要素を特定のスロットに割り当てるために使用されるグローバル属性です。名前付きスロットやデフォルトスロットとの対応付けを可能にし、柔軟なコンテンツの配置とカスタマイズを実現します。

基本構文

<element slot="slot-name"></element>

• element: スロットに割り当てる要素。
• slot-name: 割り当て先のスロット名。名前を指定しない場合はデフォルトスロットに割り当てられます。

使用例

カスタム要素でのスロット定義

<template id="my-component">
  <style>
    ::slotted(h1) {
      color: blue;
    }
  </style>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></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>
  <h1 slot="header">これはヘッダーです</h1>
  <p>これはデフォルトスロットの内容です</p>
  <p slot="footer">これはフッターです</p>
</my-component>

この例では、slot="header"、slot="footer"で名前付きスロットにコンテンツを割り当て、名前を指定しない要素はデフォルトスロットに配置されます。

動作の概要

• 名前付きスロット:
  • スロット名を指定することで、特定のコンテンツを特定の場所に挿入できます。
• デフォルトスロット:
  • スロット名が指定されていないコンテンツは、シャドウDOM内の<slot>要素に対応します。
• スタイリング:
  • ::slotted(selector)疑似クラスを使用して、スロット内の要素をスタイリングできます。

slot属性の利用シーン

• 再利用可能なコンポーネントの作成:
  • ヘッダー、フッター、メインコンテンツなど、柔軟な構造を持つカスタム要素を作成できます。
• テンプレートのカスタマイズ:
  • ユーザーがコンテンツを簡単に指定し、デザインをカスタマイズできるようにします。
• 動的コンテンツの配置:
  • JavaScriptを使用して、スロットへのコンテンツの挿入や変更を動的に行えます。

注意点

• スロット名の重複:
  • 同じスロット名に複数の要素を割り当てると、それらは順序に従って挿入されます。
• ブラウザサポート:
  • シャドウDOMとスロットは最新のブラウザで広くサポートされていますが、古いブラウザでは動作しない場合があります。
• アクセシビリティ:
  • スロット内のコンテンツはシャドウDOMに閉じ込められるため、適切なARIA属性を指定してアクセシビリティを向上させる必要があります。

互換性

互換性

ブラウザ	サポート状況
Chrome	対応
Edge	対応
Firefox	対応
Safari	対応
Opera	対応

参考文献

• HTML Living Standard - slot attribute
• MDN Web Docs - slot attribute

関連項目

• Web Components
• シャドウDOM
• HTMLのカスタム要素