<html>
<body>
<book-details>
<span class="title">Crime and Punishment</span>
<span class="author">Fyodor Dostoyevsky</span>
<span class="date">1866</span>
</book-details>
<template id="book-details-template">
<b>Title:</b> <content select=".title">NEED TITLE</content> <br />
<b>Author:</b> <content select=".author">NEED AUTHOR</content> <br />
<b>Date:</b> <content select=".date">NEED DATE</content> <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.createShadowRoot();
var clone = template.cloneNode(true);
shadowRoot.appendChild(clone);
}
</script>
</body>
</html>
The content element marks the insertion point for shadow DOM content.
Deprecated Use slot instead.
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:
Author:
Date:
N of