JSFiddle - React, Tailwind, and code Playground

by Tyler

HTML

<div>
    <h3>Light DOM</h3>
    <section>
        <div>I'm not underlined</div>
        <p>I'm underlined in Shadow DOM!</p>
    </section>
</div>

JavaScript

var div = document.querySelector('div');
var root = div.createShadowRoot();
root.innerHTML = '\
    <style>\
        h3 { color: red; }\
        content[select="h3"]::content > h3 {\
            color: green;\
        }\
        ::content section p {\
          text-decoration: underline;\
        }\
      </style>\
      <h3>Shadow DOM</h3>\
      <content select="h3"></content>\
      <content select="section"></content>';