Learning Shadow DOM

Just one of the things I'm learning. https://github.com/hchiam/learning

Shadow DOM enables scoped elements and scoped CSS. It's used by Web Components.

Shadow DOM isolates DOM and scopes CSS.

For security/other reasons, you can't attach shadow DOM to some elements.

Follow links on this page to learn more: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

<div>
  <p>
    Hi! Shadow elements encapsulate/insulate inner parts. Think
    <code>&lt;video&gt;</code> components.
  </p>
  <div id="shadow-host"></div>
  <p>
    The styles in the shadow DOM don't leak out so this paragraph doesn't get
    affected
  </p>
</div>
<script>
  const elementRef = document.getElementById("shadow-host");
  const shadowRoot = elementRef.attachShadow({ mode: "open" });
  const paragraph = document.createElement("p");
  paragraph.innerText = "Paragraph inside shadow root.";
  shadowRoot.innerHTML = `<style>p{background:navy;}</style>`;
  shadowRoot.appendChild(paragraph);
</script>
<style>
  body {
    background: #333;
    color: snow;
    font-family: avenir, arial, monospace;
  }
</style>