JSFiddle - React, Tailwind, and code Playground

by AntowaKartowa

HTML

<div class="parent">
  <div class="host">
    <template shadowrootmode="open" shadowrootserializable shadowrootclonable>
      <style>
        :host(div) {
          background: red;
          position: relative;
          padding: 0 5px;
        }

        .hidden { display: none; }
        .visible {
          position: absolute;
          top: 0;
          left: 50px;
        }
      </style>
      <p part="test">Test</p>
      <div class="visible">
        <slot></slot>
      </div>
    </template>
    <p>Slotted Element</p>
  </div>
</div>

CSS

p {
  color: green;
}

.host ::part(test) {
  color: yellow;
}

JavaScript

var parentDiv = document.querySelector('.parent');
var hostDiv = document.querySelector('.host');
// var cloneDiv = parentDiv.cloneNode(true);

// document.body.appendChild(cloneDiv);

console.log('---debug', parentDiv.innerHTML);
console.log('---debug', hostDiv.outerHTML);
console.log('---debug', parentDiv.getHTML({ serializableShadowRoots: true }));
console.log('---debug', hostDiv.getHTML({ serializableShadowRoots: true, shadowRoots: [hostDiv.shadowRoot] }));