<slot>タグの解説
<slot>は、ウェブコンポーネントを使ってDOMツリーを構築した祭、独自に扱える枠を提供します。この要素が配置された箇所は差し替え可能なプレースホルダーとなり、範囲に記述された内容はブラウザがスロットに対応していない場合の代替テキストになります。
基本的には、<template>と組み合わせて記述します。この要素のname属性に指定された値が、呼び出し側の要素のslot属性の値と連動し、書き換えを可能にします。
ウェブコンポーネントに対応していない環境では、<slot>に囲われた内容が代替コンテンツとして表示されます。
<slot>タグの特徴
- レイアウトの初期値はインラインです。文章の改行には影響を与えません。
- 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<slot>要素に指定できる属性
name- スロットの名前を指定します。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<slot>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。name属性の値は、他の要素に付与されたslot属性から参照するために使われます。
<p>
<slot name="name">代替テキスト</slot>
</p>
このタグを使ったマークアップのサンプルです。
<template id="temp_sample">
<style>
h1 {
margin: 1em 0;
padding-bottom: 0.5em;
border-bottom: 1px solid #eee;
font-size: 1.5rem;
}
.contents {
font-size: 1rem;
}
</style>
<h1>
<slot name="temp_h1">タイトル</slot>
</h1>
<div class="contents">
<slot name="temp_c1">
<p>コンテンツ</p>
</slot>
</div>
</template>
<div id="sample">
<span slot="temp_h1">置き換え文字</span>
<p slot="temp_c1">置き換えコンテンツ</p>
</div>