slot=""

更新日
仕様 HTML Living Standard
分類 グローバル属性

slot属性は、Shadow DOM内に置かれたスロット（slot要素）との関連付けを指定します。


<span slot="example">サンプル</span>
属性 値
グローバル属性
slot="" スロットの名前 文字列 スロットを識別するための名前

slot属性の指定について

次の例では、template要素内に配置されたslot要素に対し、name属性でスロット名を指定しています。そして、カスタム要素（<my-element>）内にあるslot属性にもスロット名を指定しています。

このslot要素のスロット名とslot属性のスロット名を一致させることで、slot属性が指定された要素（この例ではspan要素）と特定のslot要素とを関連付けられるようになります。

<template id="my-template">

   <div>
      <slot name="sei">姓</slot>
      <slot name="mei">名</slot>
   </div>

</template>


<my-element>
<span slot="sei">山田</span>
<span slot="mei">太郎</span>
</my-element>

<my-element>
<span slot="sei">鈴木</span>
<span slot="mei">花子</span>
</my-element>


<script>

   customElements.define('my-element',
      class extends HTMLElement {
         constructor() {
            super();
            var template = document.getElementById('my-template').content;
            var shadowRoot = this.attachShadow({mode: 'open'})
                             .appendChild(template.cloneNode(true));
         }
      }
   );

</script>

上記の例では、sei と mei といったスロット名によって関連付けが行われています。

このように指定しておくことで、カスタム要素内で定義された値（上記例では山田や太郎など）が、特定のslot要素に挿入されるようになります。

  • スロットに関する詳細は下記のページをご覧ください。

指定できる要素

slot属性はグローバル属性のため、全てのHTML要素に指定することができます。

  • ただし、属性と要素の組み合わせによっては効果がない場合もあります。
旧HTMLからの変更点
  • HTML LS：slot属性が定義されました。

使用例


<template id="my-template">

   <style>
   div {
      margin: 0 0 1.2em;
      border: 1px #c0c0c0 solid;
      font-weight: bold;
   }
   </style>

   <div>
      <slot name="sei">姓</slot>
      <slot name="mei">名</slot>
   </div>

</template>


<my-element>
<span slot="sei">山田</span>
<span slot="mei">太郎</span>
</my-element>

<my-element>
<span slot="sei">鈴木</span>
<span slot="mei">花子</span>
</my-element>


<script>

   customElements.define('my-element',
      class extends HTMLElement {
         constructor() {
            super();
            var template = document.getElementById('my-template').content;
            var shadowRoot = this.attachShadow({mode: 'open'})
                             .appendChild(template.cloneNode(true));
         }
      }
   );

</script>
表示例
山田 太郎 鈴木 花子