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

取り扱い 現行の標準
カテゴリ フロー・コンテンツ
フレージング・コンテンツ
親にできる要素 フレージング・コンテンツを受け入れる要素
子にできる要素 トランスパレント・コンテンツ
対応ブラウザ caniuseで確認

<slot>タグの説明

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

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

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

<slot>タグの特徴

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

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

name
スロットの名前を指定します。
グローバル属性
基本的に全てのHTML要素に指定できる共通の属性です。
イベントハンドラ
基本的に全てのHTML要素に指定できるコンテンツ属性です。

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

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

<slot>に関連するHTMLタグ

オブジェクトやスクリプトを埋め込む要素
<img> 画像を表示する
<picture> 特定の画像に対して複数のメディアソースを提供するコンテナを設置する
<figure> 写真や図表などの自己完結した要素を表す
<figcaption> 参照される写真や図表にキャプションを追加する
<canvas> スクリプトで定義したグラフィックスを描画するための領域を配置する
<audio> ドキュメント内に音声コンテンツを埋め込む
<video> ページ内に動画コンテンツを表示する
<source> 再生候補となる動画や音源などのメディアソースを指定する
<track> 動画や音声ファイルに字幕やキャプションを追加する
<embed> 外部コンテンツを埋め込む
<object> 外部リソースのオブジェクトを埋め込む
<param> パラメーターを指定する
<script> HTMLで実行可能なスクリプトを埋め込む
<noscript> スクリプトが動作しない環境での表示内容を指定する
<meter> 規定範囲内の数量や測定値を表す
<progress> 作業の進捗状況を示すプログレスバーを表示する
<output> 計算結果やユーザーアクションの出力欄を作成する
<template> ページ読み込み後にスクリプトの実行によって挿入可能な要素を定義する
<slot> ウェブコンポーネントで独自に扱える枠を提供する