JSFiddle - React, Tailwind, and code Playground

HTML

<div id="host">
    <h1>User supplied header</h1>
    <p>User supplied content</p>
</div>

CSS

:root {
    -webkit-var-themeColor: blue;
    var-themeColor: blue;
}

JavaScript

var root = document.getElementById('host').webkitCreateShadowRoot();
root.innerHTML = '<style>' +
    '#wrapper {' +
    '    border: 3px solid -webkit-var(themeColor);' +
    '}' +
    'p {' +
    '    color: -webkit-var(themeColor);' +
    '}' +
    '</style>' +
    '<div id="wrapper">' +
    '    <p>Shadow DOM content</p>' +
    '    <content></content>' +
    '    <p>More Shadow DOM content</p>' +
    '</div>';