JSFiddle - React, Tailwind, and code Playground

HTML

<template id="test-shadow-dom-template">
     <style>
       * {
         font-style: italic;
       }
     </style>
     <slot name="menu-bar"></slot>
     <span id="contents">
       <slot>The content</slot>
     </span>
   </template>


   <p>Hello</p>

   <div>
     <div id="test-shadow-dom-container" class="box" style="height: 100%">
       <test-shadow-dom id="my-id">
         <h1>Here is the actual contents...</h1>
       </test-shadow-dom>
     </div>
   </div>

JavaScript

if(!customElements.get('test-shadow-dom')) {
  customElements.define('test-shadow-dom', class extends HTMLElement {
    constructor() {
      super();

      let template = document.getElementById("test-shadow-dom-template");
      let templateContent = template.content;

      const shadowRoot = this.attachShadow({mode: 'closed'});
      shadowRoot.appendChild(templateContent.cloneNode(true));
    }
  });
}