SYNCER

SYNCER

slot属性 - 関連付けるslot要素の名前

公開日:

slot属性は、Shadow DOMのslot要素を指定するための属性です。Shadow DOM内のslot要素のname属性を指定すると、そのslot要素とこの要素を置き換えることができます。

説明

slot属性は、Shadow DOMの内側にある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属性 - 関連付けるslot要素の名前</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Global_attribute/slot/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>slot属性に、Shadow DOMの内側にあるslot要素のname属性を指定すると、そのslot要素と置き換えることができます。</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>までを含めて下さい。

<body> <div id="___body">

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

<style>

</style>

<script>

</script>