JSFiddle - React, Tailwind, and code Playground

HTML

<style> .container { background-color: red; } </style>

<div class="container">This is outside the shadow DOM. It honors global styles.</div>

<div>
  <template shadowrootmode="open">
    <style> .container { font-size: 2rem; } </style>
    <div class="container">This is inside the shadow DOM. It inherits nothing from global styles. Styles defined inside here don't leak out of this scope.</div>
  </template>
</div>

<div class="container">Even after the shadow DOM above, the styles inside it don't cascade to affect the outside world.</div>