Shadow DOM

The CSS gets contained.

// creating shadow DOM
<p class="highlight">Welcome to GeeksForGeeks</p> 
 
<div id="Firstcomponent"></div> 
 
<script> 
  const shadowRootOne = 
     document.getElementById('Firstcomponent')
            .attachShadow({mode: 'open'}); 
</script>

The mode option is used to set the encapsulation level. It must follow any of two values:

1. “open” – open means that you can access the shadow DOM using JavaScript.

For example using the Element.shadowRoot property: let myShadowDom = myCustomElem.shadowRoot;

2.  “closed” – myCustomElem.shadowRoot returns null.

Links

• https://www.geeksforgeeks.org/what-is-shadow-root-and-how-to-use-it/