＜slot要素＞ - Shadow DOMの外側から内側にコンテンツを埋め込むスロット

公開日: 2017/02/09

slot要素は、スロットを表す要素です。この要素をShadow DOMの内側に配置すると、その位置に外側からコンテンツを手軽に埋め込むことができます。

概要

名前: slot
カテゴリー: Flow content; Phrasing content
配置できる場所: Phrasing contentが期待される場所。
コンテンツモデル: Transparent content。
タグの省略: 開始タグも終了タグも省略できません。
DOM Interface: HTMLSlotElement
仕様書: https://html.spec.whatwg.org/multipage/scripting.html#the-slot-element

属性

name

スロットの名前。

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

Shadow DOMの内側にslot要素を配置すると、Shadow DOMの外側から簡単に内容を埋め込むことができます。置き換える要素のslot属性には、置き換えられるslot要素のname属性値を指定して下さい。slot属性を付けた要素は、ホストとなるコンテナの子要素になるよう配置しましょう。

HTML

<!-- ホストとなるコンテナ -->
<div id="shadow-dom-host">
	<span slot="name">あらゆ</span>
	<img slot="image" src="./author.png">
</div>

<!-- Shadow DOMに追加するテンプレート -->
<template id="shadow-dom-template">
	<!-- slot=nameの要素(span要素)に置き換わる -->
	<slot name="name"></slot>

	<!-- slot=imageの要素(img要素)に置き換わる -->
	<slot name="image"></slot>
</template>

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜slot要素＞ - Shadow DOMの外側から内側にコンテンツを埋め込むスロット</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/slot/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>slot要素は、Shadow DOMの外側から、Shadow DOMの内側に内容を埋め込むためのスロットの役割を果たします。</p>

<h2>表示</h2>
<!-- Host -->
<div id="shodow-dom-host">
	<span slot="name">あらゆ</span>
	<img slot="image" src="/image/author/100.png">
</div>

<!-- Shadow DOM -->
<template id="shadow-dom-template">
	<p>名前: <slot name="name"></slot></p>
	<p>画像: <slot name="image"></slot></p>
</template>
<script>
// テンプレートを取得
var templeteContent = document.getElementById( "shadow-dom-template" ).content.cloneNode(true) ;

// ホストを取得
var hostElement = document.getElementById( "shodow-dom-host" ) ;

// Shadow DOMを追加
var rootElement = hostElement.attachShadow( { mode: "open" } ) ;

// Shadow DOMにテンプレートを追加
rootElement.appendChild( templeteContent ) ;
</script>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/673/"> <meta charset="utf-8"> <title>【デモ】＜slot要素＞ - Shadow DOMの外側から内側にコンテンツを埋め込むスロット</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/slot/"> </head> <body>

<p>slot要素は、Shadow DOMの外側から、Shadow DOMの内側に内容を埋め込むためのスロットの役割を果たします。</p> <h2>表示</h2>  <div id="shodow-dom-host"> <span slot="name">あらゆ</span> <img slot="image" src="/image/author/100.png"> </div>  <template id="shadow-dom-template"> <p>名前: <slot name="name"></slot></p> <p>画像: <slot name="image"></slot></p> </template>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

// テンプレートを取得 var templeteContent = document.getElementById( "shadow-dom-template" ).content.cloneNode(true) ; // ホストを取得 var hostElement = document.getElementById( "shodow-dom-host" ) ; // Shadow DOMを追加 var rootElement = hostElement.attachShadow( { mode: "open" } ) ; // Shadow DOMにテンプレートを追加 rootElement.appendChild( templeteContent ) ;

</script>