Shadow DOM内におけるデータの挿入口を表す

slot要素は、Shadow DOM内におけるスロット（データの挿入口）を表します。

次の例では、template要素内でslot要素を使用しています。

この場合、slot要素のname属性の値と、カスタム要素（<my-element>）内にあるslot属性の値を一致させることで、カスタム要素内で定義された値が特定の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>

<my-element>
<span slot="sei">佐藤</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>

slot要素に挿入された値は、カスタム要素を配置した位置で次のように表示されます。（上記コードの実際の表示例です）

slot要素に値が挿入されなかった場合は、slot要素の内容が表示されることになります。

上記の例では、佐藤さんの下の名前が定義されていないため、slot要素内のテキスト（名）が表示されています。

• template要素内で設定されたスタイルは、template要素内のHTMLにのみ適用されます。

name属性がない場合

name属性を持たない1つ目のslot要素には、シャドウホスト（下記の例では <my-element2>）の子要素のうちslot属性を持たない子要素がすべて挿入されます。

<template id="my-template2">

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

   <div>
      <p>段落1：<slot>既定のテキスト1</slot></p>
      <p>段落2：<slot>既定のテキスト2</slot></p>
   </div>

</template>


<my-element2>
<span>山田</span>
<span>太郎</span>
<span slot="demo1">鈴木</span>
<span slot="demo2">花子</span>
</my-element2>


<script>

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

</script>

上記コードの実際の表示例は次のようになります。

1つ目のslot要素には山田と太郎が挿入され、slot属性が指定された鈴木と花子は挿入されません。

2つ目のslot要素には値が挿入されないため、slot要素内のテキスト（既定のテキスト2）が表示されています。

複数の値を挿入する場合

name属性が指定された1つのslot要素に対し、複数の値を挿入することもできます。

<template id="my-template3">

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

   <div>
      <p><slot name="test">既定のテキスト</slot></p>
   </div>

</template>


<my-element3>
<span slot="test">その1</span>
<span slot="test">その2</span>
<span slot="test">その3</span>
<span>その4</span>
</my-element3>


<script>

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

</script>

上記コードの実際の表示例は次のようになります。