Shadow Dom example

darkshadow.js

var template = document.createElement('template')

template.innerHTML = `

        <style>
            * {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -ms-box-sizing: border-box;
                box-sizing: border-box;
            }
            
            #slider {
                max-width: 600px;
                text-align: center;
                margin: 0 auto;
            }
            
            #overflow {
                width: 100%;
                overflow: hidden;
            }
            
            #slides .inner {
                width: 400%;
            }
            
            #slides .inner {
                -webkit-transform: translateZ(0);
                -moz-transform: translateZ(0);
                -o-transform: translateZ(0);
                -ms-transform: translateZ(0);
                transform: translateZ(0);
                -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
                -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
                -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
                -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
                transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
                -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
                -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
                -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
                -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
                transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
            }
            
            #slides img {
                width: 25%;
                float: left;
            }
            
            #slide1:checked ~ #slides .inner {
                margin-left: 0;
            }
            
            #slide2:checked ~ #slides .inner {
                margin-left: -100%;
            }
            
            #slide3:checked ~ #slides .inner {
                margin-left: -200%;
            }
            
            #slide4:checked ~ #slides .inner {
                margin-left: -300%;
            }
            
            input[type="radio"] {
                display: none;
            }
            
            label {
                background: #CCC;
                display: inline-block;
                cursor: pointer;
                width: 10px;
                height: 10px;
                border-radius: 5px;
            }
            
            #slide1:checked ~ label[for="slide1"],
            #slide2:checked ~ label[for="slide2"],
            #slide3:checked ~ label[for="slide3"],
            #slide4:checked ~ label[for="slide4"] {
                background: #333;
            }
            
            #slides::content img {
                width: 25%;
                float: left;
            }
        </style>
        <div id="slider">
            <input checked="" type="radio" name="slider" id="slide1" selected="false">
            <input type="radio" name="slider" id="slide2" selected="false">
            <input type="radio" name="slider" id="slide3" selected="false">
            <input type="radio" name="slider" id="slide4" selected="false">
            <div id="slides">
                <div id="overflow">
                    <div class="inner">
                        <content select="img"></content>
                    </div>
                    <!-- .inner -->
                </div>
                <!-- #overflow -->
            </div>
            <label for="slide1"></label>
            <label for="slide2"></label>
            <label for="slide3"></label>
            <label for="slide4"></label>
        </div>`

// Create a prototype for a new element that extends HTMLElement
var ImgSliderProto = Object.create(HTMLElement.prototype);

// Setup our Shadow DOM and clone the template
ImgSliderProto.createdCallback = function () {
    var root = this.createShadowRoot();
    root.appendChild(document.importNode(template.content, true));
};

// Register our new element
var ImgSlider = document.registerElement('img-slider', {
    prototype: ImgSliderProto
});

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shadow Root</title>

    <link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>

   <!--This example only accepts four images in the slider-->
   
    <img-slider>
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5689/rock.jpg">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5689/grooves.jpg">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5689/arch.jpg">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5689/sunset.jpg">
    </img-slider>

    <!-- This message is just for the result tab -->
    <p>Nothing to see because &lt;template&gt; is inert</p>

    <script src="darkshadow.js"></script>
</body>

</html>

this implements v0 of shadow DOM. don't use!