<meta name="description" content="An example of a custom element SSRed with Declarative Shadow DOM">

<h3>An example of a custom element SSRed with Declarative Shadow DOM</h3>

<p>There should be <strong>no JS</strong> running in this environment.</p>

​

<!-- This is just to polyfill declarative <shadow-root> -->

<script src="https://cdn.jsdelivr.net/npm/document-register-element@1.7.2/build/document-register-element.min.js"></script>

<script>/* This is just to polyfill declarative shadowroot*/

  customElements.define('shadow-root', class extends HTMLTemplateElement{

    //constructor(){ // we cannot use parentElement on constructor

    connectedCallback(){

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

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

    }

  },{extends: 'template'});

</script>

<p>Check the full Custom Element case <a href="http://jsbin.com/rivoyiz/edit?html,output">http://jsbin.com/rivoyiz/edit?html,output</a></p>

​

​

<hr>

<fancy-content>

  <template is="shadow-root">

    <!-- a huuuge div-soup full of nasty styles that should not leak -->

    <style>

      /* Yey! It's Shadow DOM, I can make all spans pink, an it will affect only my playground */

      span{

        color: pink;

      }

      ::slotted(*){

       color: green;

      }

    </style> 

    <span>I'm Pinky - the shady span</span>

    <div>

      Hurray, I can scope element ids in shadow DOM, look at this beautiful input:

      <input id="one-and-only" placehoder="shadowdom input">

    </div>

    <div><slot></slot></div>

    </template>

  <p>some green content that goes inside the default slot</p>

</fancy-content>

<label for="one-and-only">Label for light dom input</label>

<input id="one-and-only" placeholder="lightdom input">