Phase 4 Step 7: Shadow DOM

[thomasnemer]

Parent: #41

Goal

Implement Shadow DOM so that components can encapsulate their internal DOM structure and styles, enabling web component support.

Prerequisites

• No strict dependency, but best implemented after rendering Steps 1-6 are stable

Implementation

• Add shadow root to elements: shadow_root: Option<NodeId> field, NodeKind::ShadowRoot variant
• Composed tree traversal for rendering (flatten shadow trees into the render tree)
• Style scoping: shadow boundary blocks style leakage (except inherited properties and CSS custom properties)
• Slot distribution: <slot> element projects light DOM children into shadow tree
• JS API: element.attachShadow({ mode }), element.shadowRoot, ShadowRoot interface
• Event retargeting across shadow boundaries

Tests

• Shadow root creation and attachment tests
• Composed tree traversal tests
• Style scoping tests (styles don't leak in or out)
• Inherited property and custom property penetration tests
• Slot distribution and reassignment tests
• Event retargeting tests

Acceptance Criteria

• attachShadow() creates open/closed shadow roots
• Shadow DOM renders correctly via composed tree traversal
• Styles are properly scoped at shadow boundaries
• <slot> distributes light DOM children correctly
• Events retarget across shadow boundaries per spec