Shadow DOM Card - JavaScript Client

A custom card attaches a shadow root so its internal style and markup are scoped away from the outer page.

Program

Shadow DOM gives a component a private subtree. Styles inside that subtree target the component internals without leaking out.

shadow_dom_card.html

<section id="host"></section>
<script>
  const host = document.querySelector("#host");
  const shadow = host.attachShadow({ mode: "open" });
  shadow.innerHTML = `<style>.card { color: white; background: #0f766e; }</style>
    <article class="card">Scoped card</article>`;
</script>

attachShadow attachShadow creates a shadow root on a host element.

style scope Styles in shadow DOM apply to the shadow tree, not the outer document.