Shadow DOM Design Refresher

This is a quick summary of the design decisions made while specifying and implementing Shadow DOM, as well as insight gained from 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 (basic-calendar-month)
• insertion points -- some way to position element's children inside of the internal DOM tree (basic-carousel)

Transitive properties

Things that fell out of exercising the concept.

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

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 in the wild)
• open and open-by-default shadow root -- because testing/introspection/tweaking tools need access (accessibility checker)