Shadow DOM Design Refresher

This is a quick summary of the design decisions made during developing of the Shadow DOM specification and implementation experience.

Objective

Shadow DOM is a core primitive of Web Components, responsible for hiding implementation details of a component in the same way the HTML elements hide theirs.

Concept

• internal DOM tree -- a way to use DOM an CSS inside of the element (example)
• insertion points -- some way to position element's children inside of the internal DOM tree (example)

Transitive properties

Things that fell out of exercising the concept.

• multiple shadow trees per host -- to provide override/reuse internal trees when using inheritance (example)
• distributions -- because another element's insertion point may end up being your child (example)
• event retargeting -- because events reveal your guts (example)
• we must go deeper, relatedEvent retargeting (example)
• deeper still, intersection of distributions and event retargeting (example)
• activeElement retargeting -- because focus can point to your guts (example)
• style scoping -- because want to style things only in internal DOM tree (example)

Closing the Gaps

Things that were added as a response to real-life scenarios.

• ::content pseudo-element -- because components commonly want to style elements, distributed insertion points (example)
• shadow-piercing combinators -- because of legacy code, global styling needs, and tweaking (examples)
• open and open-by-default shadow root -- because testing/introspection/tweaking tools need access