記事

<slot>~</slot>

slot（スロット）要素はDOMにおけるShadowツリーによって、name属性をもつslot要素が、その name属性値と同じ値をもつslot属性が指定された要素によって置き換えてレンダリングされる。

template要素と組み合わせることで、より柔軟にテンプレートを使用することができる。

なお、Web Componentsに対応してないユーザーエージェントにおいては、代替コンテンツとして、slot要素の内容が表示されます。

slot要素で使用できる属性

グローバル属性

すべてのHTML要素で使用できる属性になります。

name属性

name属性は、要素に名前を付与します。この名前を使用して、JavaScriptから要素にアクセスしたり、iframe要素に付与した名前はリンクのターゲットに使用したりすることができる。

使用例

<template id="my-template">

   <div>
      <slot name="last-name">姓</slot>
      <slot name="first-name">名</slot>
   </div>

</template>

<my-element>
<span slot="last-name">佐藤</span>
<span slot="first-name">太郎</span>
</my-element>

<my-element>
<span slot="last-name">鈴木</span>
<span slot="first-name">桜子</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>

表示