JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<h1>Example - you can inspect this header normally but not the other elements</h1>

<div id="example4">
  <h2>First Name</h2>
  <h2>Last Name</h2>
  <div>Job Title</div>
  <h4>Footer</h4>
</div>

<template id="sdom">
  <header>
    <content select="h2"></content>
  </header>
  <section>
    <content select="div"></content>
  </section>
  <footer>
    <content select="h4:first-of-type"></content>
  </footer>
</template>

JavaScript

var container = document.querySelector('#example4');
var root = container.createShadowRoot();
var t = document.querySelector('#sdom');
var clone = document.importNode(t.content, true);
root.appendChild(clone);