JSFiddle - React, Tailwind, and code Playground

HTML

<span>outside container</span>
<br>
<my-custom-component string="foo bar loacker"></my-custom-component>

JavaScript

class MyCustomComponent extends HTMLElement {
  constructor() {
    super();
    const shaddow = this.attachShadow({mode:'open'});
    shaddow.innerHTML = `
       <style>
          span {
            background-color: yellow;
          }
       </style>
       <span>these html & css are isolated</span>
    `;
  }
  
  static get observedAttributes() { return ['string']; }
  
  attributeChangedCallback(name, oldValue, newValue) {
    if(name === "string") {
    	this.shadowRoot.querySelector('span').innerHTML = newValue;
    }
  }
}

customElements.define('my-custom-component', MyCustomComponent);