Web Components & Shadow DOM

What is the difference between Light DOM and Shadow DOM?

<!-- Light DOM -->
<my-element>
  <p>This is Light DOM content</p>
</my-element>

<!-- Shadow DOM -->
<my-element>
  #shadow-root
    <style>/* Scoped styles */</style>
    <slot></slot>
</my-element>

Light DOM is faster than Shadow DOM
Shadow DOM is only for styling
Light DOM is the regular DOM tree, Shadow DOM is encapsulated
The key differences between Light DOM and Shadow DOM are: 1) Light DOM is the regular DOM tree that's fully visible and accessible, 2) Shadow DOM provides encapsulation and scoping for markup and styles, 3) Light DOM elements can be projected into Shadow DOM through slots, 4) Shadow DOM creates a boundary that prevents styles and selectors from leaking in or out.
Light DOM is deprecated

Next Question (9/20)