Shadow DOM

by Julien Etienne

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.2/platform.js"></script>
<div id="img-caption-widget"></div>
<template id="img-caption-template">
    <style>
      .img-caption-button img {
        border: 2px dashed #ccc;
        padding: 3px;
      }
    
      .img-caption-button > span {
        font-weight: bold;
        display: block;
        color: blue;
      }
    
      .img-caption-button button {
        border: 1px solid #000;
        background-color: green;
        color: white;
        padding: 3px;
      }
    </style>
    <div class="img-caption-button">
        <img src="http://lorempixel.com/400/200/nature" />
        <span>This is my image caption!</span>
        <button>Click Me</button>
    </div>
</template>

CSS

button {
    background-color: yellow !important;
}

JavaScript

//CREATE SHADOW DOM AND GET TEMPLATE REFERENCE
var shadow = document.querySelector('#img-caption-widget').createShadowRoot();
var template = document.querySelector('#img-caption-template');

//POPULATE SHADOW DOM WITH TEMPLATE CONTENT
console.log('shadow', shadow, shadow.host.impl)