JSFiddle - React, Tailwind, and code Playground

by dunerunner

HTML

<div id="host">
  <h2>Eric</h2>
  <h2>Bidelman</h2>
  <div class="desc">
    Title: <span>Digital Jedi</span>
  </div>
  <div>Not selected</div>
  <h4>footer text</h4>
</div>

<template>
            <div id="first-inner-element">Shadow 1</div>
            <div id="second-inner-element">Shadow 2</div>
            <content></content>
            <style>
                #first-inner-element {
                    width: 100px;
                    height: 20px;
                    background: green;
                    position: absolute;
                    top: 140px;
                }
                #second-inner-element {
                    width: 100px;
                    height: 20px;
                    background: black;
                    margin-bottom: 40px;
                }
            </style>
        </template>

CSS

#first-inner-element {
        background:orange !important;
}

JavaScript

var shadowHost = document.querySelector("#host");
var shadowRoot = shadowHost.createShadowRoot();
shadowRoot.innerHTML = document.querySelector("template").innerHTML;

var elem = shadowRoot.querySelector('#first-inner-element');
console.log(elem);
$(elem).css('background', 'orange');
//console.log($('#first-inner-element').css('background', 'orange'));