<script type="text/javascript" src="https://rawgithub.com/webcomponents/webcomponentsjs/master/webcomponents-hi-sd-ce.js"></script>

    <style type="text/css">

        h2 {

            color: red;

            border-bottom: 1px black dotted;

        }

    </style>

    <h2>h2 red and dotted</h2>

    <my-element>

    </my-element>

    <template id="myElementTemplate">

        <style scope="my-element">

            h2 {color: blue}

        </style>

        <div>

            <h2>h2 blue and not dotted !</h2> <!-- Should not be dotted because of the encapsulation -->

        </div>

    </template>

    <script type="text/javascript">

        ShadyCSS.prepareTemplate(myElementTemplate, 'my-element');

        class MyElement extends HTMLElement {

            connectedCallback() {

                ShadyCSS.styleElement(this);

                if (!this.shadowRoot) {

                    this.attachShadow({mode: 'open'});

                    this.shadowRoot.appendChild(document.importNode(myElementTemplate.content, true));

                }

                ShadyCSS.styleElement(this);

            }

        }

        customElements.define("my-element", MyElement);

    </script>