document an example of using Declarative Shadow DOM by setting shadowRoot.innerHTML

[thescientist13]

Type of Change

Documentation

Summary

As part of the discussions / patterns being discussed #177 , one thing that seemed valuable now was making it so that users can do this without having to manually insert a <template> tag

// before
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
   <template shadowrootmode="open">
     <header>
       <h1>Welcome to my site!</h1>
     </header>
   </template>
`;

// after
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
   <header>
     <h1>Welcome to my site!</h1>
   </header>
`;

Details

So somewhere we should

1. compliment our examples that use this.shadowRoot.appendChild(template.content.cloneNode(true)); with shadowRoot.innerHTML
2. I think this example was meant to demonstrate innerHTML (no shadow root) - https://merry-caramel-524e61.netlify.app/examples/#server-rendering-ssr