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>