Shadow DOM Sample

by bakhshi

HTML

<div id="outer">
    How about some cool demo, eh ?
    <div class="cursiveButton">
        My Awesome Button
    </div>
</div>

<template>
    <button>
        <content select=".cursiveButton">Fallback Content</content>
    </button>
    <style>
        button{
            font-family: cursive;
            font-size: 24px; 
            color: red;
        }    
    </style>
</template>

JavaScript

//http://net.tutsplus.com/tutorials/html-css-techniques/intro-to-shadow-dom/?utm_source=html5weekly&utm_medium=email

var shadowRoot = document.querySelector("#outer").webkitCreateShadowRoot();
var template = document.querySelector("template");
shadowRoot.appendChild(template.content.cloneNode(true));
template.remove();