<slot> ウェブコンポーネントで独自に扱える枠を提供する

<slot>タグの説明

<slot>は、ウェブコンポーネントを使ってDOMツリーを構築した祭、独自に扱える枠を提供する場合に使用します。

基本的には、<template>と組み合わせて記述します。この要素のname属性に指定された値が、呼び出し側の要素のslot属性の値と連動し、書き換えを可能にします。

ウェブコンポーネントに対応していない環境では、<slot>に囲われた内容が代替コンテンツとして表示されます。

<slot>タグの特徴

• レイアウトの初期値はインラインです。文章の改行には影響を与えません。
• 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
• 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。

<slot>に指定できる主な属性

name

スロットの名前を指定します。

グローバル属性

全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。

イベントハンドラ

全てのHTML要素に指定できるコンテンツ属性です。

<slot>の使い方とサンプル

このタグを使ったマークアップのサンプルです。

<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>