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

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

​

<!-- 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 SSRed result at <a href="http://jsbin.com/gequvih/edit?html,output">http://jsbin.com/gequvih/edit?html,output</a></p>

​

​

<hr>

<script>

  customElements.define('fancy-content', class extends HTMLElement{

    constructor(){

      super();

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

      this.shadowRoot.innerHTML = `

<!-- 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>

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

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

  <slot></slot>

 </div>

`;

    }                  

  });

</script>

<fancy-content>

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

</fancy-content>

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

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

<p><span>I'm a boring black span, not affected by any styles from someone else's shadow</span></p>