JSFiddle - React, Tailwind, and code Playground

by mgiuffrida

HTML

<!-- document -->
<div id="news">
  <h1>Good day for kittens</h1>
  <div class="breaking">Kitten rescued from tree</div>
  <div>Area kitten "adorable"&mdash;owner</div>
  <div class="breaking">Jiggled piece of yarn derails kitten kongress</div>
</div>

<!-- #news' shadow -->
<template id="t">
  <content select="h1"></content>
  <div id="ticker">
    <!-- Reprojection -->
    <content id="stories"></content>
  </div>
</template>

<!-- #ticker's shadow -->
<template id="u">
  <style>
 content::distributed(*) {
  color: red
}
    *::distributed(.breaking) {
      text-shadow: 0 0 0.2em maroon;
      color: orange;
    }

    </style>
  <content class="highlight" select=".breaking"></content>
  <content></content>
</template>

CSS

.breaking {
  font-weight: bold;
}

body {
  color: blue;   
}

JavaScript

// Set up shadow DOM
var news = document.querySelector('#news');
var r = news.createShadowRoot();
var t = document.querySelector('#t');
r.appendChild(t.content.cloneNode(true));

var ticker = r.querySelector('#ticker');
var s = ticker.createShadowRoot();
var u = document.querySelector('#u');
s.appendChild(u.content.cloneNode(true));