JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<meta charset="utf-8">
<x-shell id="control-root"><span class="child">control child</span></x-shell>
<x-shell id="scoped-root"><span class="child">scoped child</span></x-shell>

<style>
  x-shell { display:block; margin:8px 0; }
  
  #control-root { color: rgb(0, 128, 0); }
  #control-root .child { color: rgb(0, 128, 0); }
  
  @scope (#scoped-root) {
    :scope { color: rgb(255, 0, 0); }
    .child { color: rgb(255, 0, 0); }
  }
</style>

<script>
  customElements.define('x-shell', class extends HTMLElement {
    constructor() {
      super();
      const r = this.attachShadow({ mode: 'open' });
      r.innerHTML = '<slot></slot>';
    }
  });
</script>