JSFiddle - React, Tailwind, and code Playground

by Takayoshi Kochi

HTML

<x-host1></x-host1>

CSS

/* never matches host4 from document */

x-host4 {
  color: white;
  background-color: black;
}

JavaScript

var host1 = document.querySelector('x-host1');
host1.attachShadow({mode: 'open'}).innerHTML = '' +
  '    <style>' +
  '        x-host4 { color: blue; }' +
  '        x-host4 { color: yellow !important; }' +
  '    </style>' +
  '    <x-host2>' +
  '        <x-host4 slot="slot1" style="color: #lime; background-color: navy !important;">aaaa</x-host4>' +
  '    </x-host2>';

var host2 = host1.shadowRoot.querySelector('x-host2');
host2.attachShadow({mode: 'open'}).innerHTML = '' +
  '    <style>' +
  '        slot::slotted(x-host4) { color: purple; }' +
  '        slot::slotted(x-host4) { color: pink !important; }' +
  '    </style>' +
  '    <x-host3>' +
  '        <slot name="slot1" slot="slot2"></slot>' +
  '    </x-host3>';

var host3 = host2.shadowRoot.querySelector('x-host3');
host3.attachShadow({mode: 'open'}).innerHTML = '' +
  '    <style>' +
  '        slot::slotted(x-host4) { color: red; }' +
  '        slot::slotted(x-host4) { color: green !important; }' +
  '    </style>' +
  '    <slot name=slot2></slot>';

var host4 = host1.shadowRoot.querySelector('x-host4');
host4.attachShadow({mode: 'open'}).innerHTML = '' +
  '    <style>' +
  '        :host { color: lightblue; }' +
  '        :host { color: lightgreen !important; }' +
  '    </style>';