light, shadow, flattened DOM

Shadow DOM

circle-info

Shadow DOM, if exists, is rendered instead of light DOM.

let root = host.attachShadow({mode: 'open'});

// โญ๏ธ shadow DOM
root.innerHTML = `
  <style> p { font-weight: bold; } </style>
  <p>Hello, John!</p>
`;

Light DOM

The markup a user of your component writes. This DOM lives outside the component's shadow DOM. It is the element's actual children.

<better-button>
  <!-- โญ๏ธ light DOM -->
  <img src="gear.svg" slot="icon">
  <span>Settings</span>
</better-button>
circle-info

If weโ€™d like to track internal modifications of light DOM from JavaScript, use: MutationObserverarrow-up-right.

Flattened DOM

The result of the browser distributing the user's light DOM into your shadow DOM, rendering the final product. The flattened tree is what you ultimately see in the DevTools and what's rendered on the page.

circle-exclamation

Last updated