Custom Element v0 + Shadow DOM v0 demo

ce-v0_plus_sd-v0-demo.js

const a = document.createElement('div');
document.body.appendChild(a);

const b = document.createElement('template');
b.innerHTML = `
 <style>
   :host { display: block; box-sizing: border-box; }
   .container { background-color: var(--fancy-bg, red);

   @media (min-width: 768px) {
     :root {
       --fancy-bg: blue;
     }
   }
 </style>

 <div class="container">Custom Element + Shadow DOM is awesome!</div>
`;

a.createShadowRoot().innerHTML = b.innerHTML;