<html>
<body>
<book-details>
<span slot="title">Crime and Punishment</span>
<span slot="author">Fyodor Dostoyevsky</span>
<span slot="date">1866</span>
</book-details>
<template id="book-details-template">
<b>Title:</b> <slot name="title">NEED TITLE</slot> <br />
<b>Author:</b> <slot name="author">NEED AUTHOR</slot> <br />
<b>Date:</b> <slot name="date">NEED DATE</slot> <br />
</template>
<script>
var template = document.getElementById('book-details-template').content;
var books = document.getElementsByTagName('book-details');
for(var i=0; i < books.length; i++) {
var book = books[i];
var shadowRoot = book.attachShadow({ mode: 'open' });
var clone = template.cloneNode(true);
shadowRoot.appendChild(clone);
}
</script>
</body>
</html>
The slot element marks the insertion point for Shadow DOM content.
Experimental
The Shadow DOM API is part of the Web Components standard. It is used to create a private DOM tree under a specified element (typically a custom HTML element). All code inside the Shadow DOM (HTML, CSS and JS) is isolated and cannot affect the layout of the containing page. This allows component authors to create fully encapsulated web components. The HTML5 video element, for example, is implemented using the Shadow DOM.
A live example:
N of