Sprint 13: Shadow DOM — Vollständige DOM-Implementierung (DocumentFragment-Basis) #69

New issue

Closed

opened 2026-06-18 16:18:18 +00:00 by Artur · 0 comments

Artur commented

2026-06-18 16:18:18 +00:00

Owner

Sprint 13 — ✅ Implementiert

Commit: edf4bcf
Tests: 27/27 grün, 1442 Gesamt — 0 Regression

Was wurde gemacht

Problem: ShadowRootStub war ein leerer Stub — querySelector, getElementById gaben immer null zurück. innerHTML war nur ein String, kein DOM.

Lösung (Option A): ShadowRoot wird jetzt via DocumentFragment implementiert — spec-konform (instanceof DocumentFragment === true).

Implementierung

// src/custom-elements/shim.ts — installAttachShadow()
HTMLElementProto.attachShadow = function(init) {
  const fragment = document.createDocumentFragment();
  Object.defineProperties(fragment, {
    mode: { value: init.mode, writable: false },
    host: { value: this, writable: false },
    innerHTML: { get/set mit HTML-Parsing via temp div },
  });
  Object.defineProperty(this, "shadowRoot", {
    get: () => init.mode === "open" ? fragment : null,
  });
  return fragment;
};

Abgedeckt

Feature	Status
`instanceof DocumentFragment`	✅
`mode: 'open'/'closed'`	✅
`shadowRoot` null bei closed	✅
double-attach throws	✅
`innerHTML` get/set mit HTML-Parsing	✅
`querySelector` / `querySelectorAll`	✅
`getElementById`	✅
`appendChild` / `removeChild`	✅
`children` / `firstChild` / `lastChild`	✅
`textContent`	✅
Isolation (versch. Hosts)	✅
Light DOM + Shadow DOM Koexistenz	✅
`isConnected` === false	✅
`<slot>`-Attribut vorhanden	✅
27 Unit-Tests	✅

Nicht enthalten (späteres Issue)

Slotting/Composition (assignedNodes(), Flattening)
CSS Isolation (fällt laut Plan flach)

## Sprint 13 — ✅ Implementiert **Commit:** `edf4bcf` **Tests:** 27/27 grün, 1442 Gesamt — 0 Regression ### Was wurde gemacht **Problem:** `ShadowRootStub` war ein leerer Stub — `querySelector`, `getElementById` gaben immer `null` zurück. `innerHTML` war nur ein String, kein DOM. **Lösung (Option A):** ShadowRoot wird jetzt via **DocumentFragment** implementiert — spec-konform (`instanceof DocumentFragment === true`). ### Implementierung ```typescript // src/custom-elements/shim.ts — installAttachShadow() HTMLElementProto.attachShadow = function(init) { const fragment = document.createDocumentFragment(); Object.defineProperties(fragment, { mode: { value: init.mode, writable: false }, host: { value: this, writable: false }, innerHTML: { get/set mit HTML-Parsing via temp div }, }); Object.defineProperty(this, "shadowRoot", { get: () => init.mode === "open" ? fragment : null, }); return fragment; }; ``` ### Abgedeckt | Feature | Status | |---------|--------| | `instanceof DocumentFragment` | ✅ | | `mode: 'open'/'closed'` | ✅ | | `shadowRoot` null bei closed | ✅ | | double-attach throws | ✅ | | `innerHTML` get/set mit HTML-Parsing | ✅ | | `querySelector` / `querySelectorAll` | ✅ | | `getElementById` | ✅ | | `appendChild` / `removeChild` | ✅ | | `children` / `firstChild` / `lastChild` | ✅ | | `textContent` | ✅ | | Isolation (versch. Hosts) | ✅ | | Light DOM + Shadow DOM Koexistenz | ✅ | | `isConnected` === false | ✅ | | `<slot>`-Attribut vorhanden | ✅ | | 27 Unit-Tests | ✅ | ### Nicht enthalten (späteres Issue) - Slotting/Composition (`assignedNodes()`, Flattening) - CSS Isolation (fällt laut Plan flach)

Artur added the

feature

label

2026-06-18 16:18:18 +00:00