Shadow DOM – Full attachShadow, Slot Assignment, Event Retargeting #123

New issue

Open

opened 2026-06-20 08:19:57 +00:00 by Artur · 0 comments

Artur commented

2026-06-20 08:19:57 +00:00

Owner

Gap

Wir haben einen installShadowDOM() Shim, aber kein echtes Shadow Root, kein echtes Slot-Assignment, kein korrektes Event Retargeting. Das bricht Frameworks die Shadow DOM nutzen (Lit, Stencil, Angular mit ViewEncapsulation.ShadowDom).

Was wir brauchen

1. attachShadow(init)

Element.attachShadow({ mode, delegatesFocus, slotAssignment })
Erzeugt ShadowRoot (extends DocumentFragment)
element.shadowRoot getter
mode: 'open' (shadowRoot sichtbar) oder 'closed' (shadowRoot = null fuer aussen)
Host-Element speichert Referenz auf ShadowRoot

2. ShadowRoot Interface

mode - 'open' | 'closed'
delegatesFocus - boolean
slotAssignment - 'manual' | 'named'
host - das Host-Element
innerHTML - Serialisierung + Parsing (wie Document)
styleSheets / adoptedStyleSheets
getSelection() - noop
elementFromPoint() - noop
Event-Retargeting: Events die vom Shadow Root aufwaerts gehen muessen retargeted werden

3. Slots

<slot> Element
slot.name / slot.assignedNodes(options) / slot.assignedElements(options)
slotchange Event feuert wenn assignedNodes sich aendern
Slot-Assignment: named slots + default slot (name="")
Flattened Tree: Kinder des Hosts werden in passende Slots verteilt

4. Slottable Interface

element.slot - Attribut-Reflection fuer slot="..."
assignedSlot - Zeigt auf das slot-Element dem das Child zugewiesen ist

5. Event Retargeting

Events die aus Shadow DOM kommen: event.composedPath() muss korrekt sein
event.target / event.relatedTarget werden auf Host-Element retargeted
event.composed flag steuert ob Event ueber Shadow Boundary hinaus propagiert
composed: false Events (z.B. focus, mouseenter) propagieren NICHT

6. Declarative Shadow DOM

<template shadowrootmode="open"> - Parser muss declarative Shadow Roots erkennen
<template shadowrootmode="closed">
Parsing: HTML Parser muss declarative Shadow DOM verarbeiten

Labels

feature, html-spec

Architektur

src/dom/shadow-root.ts (neu)
src/dom/slot.ts (neu)
ShadowRoot extendet DocumentFragment
attachShadow auf Element.prototype
Parser: Erkennung von
Event Target: composedPath + retargeting in event-target.ts
installShadowDOM() in runtime-isolation.ts wird ersetzt durch echte Implementierung

Tests

attachShadow + shadowRoot getter
Slot Assignment + slotchange
Event Retargeting (composedPath, target masking)
Declarative Shadow DOM Parser

## Gap Wir haben einen installShadowDOM() Shim, aber kein echtes Shadow Root, kein echtes Slot-Assignment, kein korrektes Event Retargeting. Das bricht Frameworks die Shadow DOM nutzen (Lit, Stencil, Angular mit ViewEncapsulation.ShadowDom). ## Was wir brauchen ### 1. attachShadow(init) - `Element.attachShadow({ mode, delegatesFocus, slotAssignment })` - Erzeugt ShadowRoot (extends DocumentFragment) - `element.shadowRoot` getter - mode: 'open' (shadowRoot sichtbar) oder 'closed' (shadowRoot = null fuer aussen) - Host-Element speichert Referenz auf ShadowRoot ### 2. ShadowRoot Interface - `mode` - 'open' | 'closed' - `delegatesFocus` - boolean - `slotAssignment` - 'manual' | 'named' - `host` - das Host-Element - `innerHTML` - Serialisierung + Parsing (wie Document) - `styleSheets` / `adoptedStyleSheets` - `getSelection()` - noop - `elementFromPoint()` - noop - Event-Retargeting: Events die vom Shadow Root aufwaerts gehen muessen retargeted werden ### 3. Slots - `<slot>` Element - `slot.name` / `slot.assignedNodes(options)` / `slot.assignedElements(options)` - `slotchange` Event feuert wenn assignedNodes sich aendern - Slot-Assignment: named slots + default slot (name="") - Flattened Tree: Kinder des Hosts werden in passende Slots verteilt ### 4. Slottable Interface - `element.slot` - Attribut-Reflection fuer slot="..." - `assignedSlot` - Zeigt auf das slot-Element dem das Child zugewiesen ist ### 5. Event Retargeting - Events die aus Shadow DOM kommen: `event.composedPath()` muss korrekt sein - `event.target` / `event.relatedTarget` werden auf Host-Element retargeted - `event.composed` flag steuert ob Event ueber Shadow Boundary hinaus propagiert - `composed: false` Events (z.B. `focus`, `mouseenter`) propagieren NICHT ### 6. Declarative Shadow DOM - `<template shadowrootmode="open">` - Parser muss declarative Shadow Roots erkennen - `<template shadowrootmode="closed">` - Parsing: HTML Parser muss declarative Shadow DOM verarbeiten ## Labels feature, html-spec ## Architektur - src/dom/shadow-root.ts (neu) - src/dom/slot.ts (neu) - ShadowRoot extendet DocumentFragment - attachShadow auf Element.prototype - Parser: Erkennung von <template shadowrootmode=...> - Event Target: composedPath + retargeting in event-target.ts - installShadowDOM() in runtime-isolation.ts wird ersetzt durch echte Implementierung ## Tests - attachShadow + shadowRoot getter - Slot Assignment + slotchange - Event Retargeting (composedPath, target masking) - Declarative Shadow DOM Parser

Artur added the

feature

html-spec

labels

2026-06-20 08:19:57 +00:00