slot=name - スロット名

トップ > HTMLリファレンス > slot=name

属性

<要素名 slot=name> - スロット名

説明

Shadow DOM において、テンプレートのスロットとのマッピングを指定します。

サンプル

HTML
<template id="shadow-dom-template">
  Title: [ <slot name="title"></slot> ],
  Artist: [ <slot name="artist"></slot> ]
</template>

<div class="song">
  <span slot="title">Let it be</span>
  <span slot="artist">The Beatles</span>
</div>

<div class="song">
  <span slot="title">Scarborough Fair</span>
  <span slot="artist">Simon & Garfunkel</span>
</div>

<script>
var hostElements = document.getElementsByClassName("song");
for (var i = 0; i < hostElements.length; i++) {
  var rootElement = hostElements[i].attachShadow({mode: "open"});
  var templeteContent = document.getElementById("shadow-dom-template").content.cloneNode(true);
  rootElement.appendChild(templeteContent);
}
</script>
表示
Let it be The Beatles
Scarborough Fair Simon & Garfunkel

リンク


Copyright (C) 2017 杜甫々
初版:2017年11月19日 最終更新:2017年12月31日
http://www.tohoho-web.com/html/attr/is.htm