slot 要素shadow ツリーとして埋め込む
DOM における Shadow ツリーによって、name 属性をもつ slot 要素が、その name 属性値と同じ値をもつ slot 属性が指定された要素によって置き換えてレンダリングされます。
template 要素と組み合わせることで、より柔軟にテンプレートを使用することができます。
なお、Web Components に対応してないユーザーエージェントにおいては、代替コンテンツとして、slot 要素の内容が表示されます。
slot 要素の仕様
- カテゴリ
- コンテンツモデル
- この要素を使用できる文脈
- フレージングコンテンツが期待される場所。
- この要素で使用できる属性
-
※ slot 要素における name 属性は Shadow ツリースロットの名前を定義します。
slot 要素のサンプルソース
<template id="sample-template">
<style>
h1 {
font-size: 1.5rem;
margin: 1em 0;
padding-bottom: .5em;
border-bottom: 1px solid #eee;
}
.contents {
font-size: 1rem;
}
</style>
<h1><slot name="sample-contents-01">タイトル</slot></h1>
<div class="contents">
<slot name="sample-contents-02"><p>コンテンツ</p></slot>
</div>
</template>
<div id="sample">
<span slot="sample-contents-01">持ち物リスト</span>
<ul slot="sample-contents-02">
<li>筆記用具</li>
<li>身分証用の写真</li>
</ul>
</div>
<script>
var templete = document.getElementById('sample-template').content.cloneNode(true);
var host = document.getElementById('sample');
var root = host.attachShadow({mode: 'open'});
root.appendChild(templete);
</script>