JSFiddle - React, Tailwind, and code Playground

by dfreedm

HTML

<div id="host"></div>

CSS

::x-foo {
    height: 40px;
    width: 40px;
    background-color: blue;
}

JavaScript

var sr = host.webkitCreateShadowRoot();
// override ::x-foo style with higher specificity style
sr.innerHTML = '<style>div::x-foo{ height: 20px; width: 20px; background: red; } @host{ ::x-foo { height: 30px; width: 30px; background: green; } }</style>'
// add progress element

//add shadow shadow host
var d = document.createElement('div');
sr.appendChild(d);

// add pseudo div
var sr2 = d.webkitCreateShadowRoot();
sr2.innerHTML = '<div pseudo="x-foo"></div>';