JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <p>IbwText</p>
<div>
    IbwText
    <span>styled text</span>
</div>
</div>


<template class="shadow-template">
    <style>
        :host{
            opacity:.4;
        }
        :host(div){
            color:blue;
        }
        :host(div) ::content span {
            color:green;
            opacity:.4;
            transition: opacity 300ms ease-in-out;
        }
        :host(div:hover) ::content span {
            opacity: 1;
        }
        :host(p){
            color:red;
        }
    </style>
    <content select = ""></content>
</template>

CSS

.container{
    opacity: 1 !important;
    color: #ccc;
}

JavaScript

var host = document.querySelector("p").createShadowRoot();
var host2 = document.querySelector("div").createShadowRoot();

var template = document.querySelector('.shadow-template');

host.appendChild(document.importNode(template.content, true));
host2.appendChild(document.importNode(template.content, true));