glow-all/true-headless-browser
2
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

HTML*Element Subclasses – Full Spec Hierarchy (100+ Elements) #118

New issue
Closed
opened 2026-06-20 08:17:42 +00:00 by Artur · 2 comments
Artur commented 2026-06-20 08:17:42 +00:00
Owner
Copy link

Ziel

Jedes HTML Element muss sein spec-definiertes Interface haben. Aktuell mappen wir ALLE HTML*Elemente auf plain Element - keine .value, .checked, .src, .href, .selectedIndex etc.

Umfang

Die HTML Living Standard definiert ~100+ Element-Interfaces. Jedes braucht:

  • spec-korrekte Properties (getter/setter)
  • spec-korrekte Methoden
  • spec-korrekte Event Handler (on* attributes)
  • korrekte HTML-String-Parsing-Roundtrip (attributes die properties setzen)

Priorität (Top 20 nach Crawling-Impact)

  1. HTMLInputElement - .value, .checked, .type, .placeholder, .disabled, .readOnly, .selectionStart/End, .form, .name
  2. HTMLFormElement - .submit(), .reset(), .elements, .length, .checkValidity(), .reportValidity()
  3. HTMLSelectElement - .options, .selectedIndex, .value, .multiple, .add(), .remove()
  4. HTMLTextAreaElement - .value, .rows, .cols, .placeholder
  5. HTMLAnchorElement - .href, .download, .rel, .target, .protocol, .hostname, .pathname, .search, .hash
  6. HTMLImageElement - .src, .width, .height, .naturalWidth/Height, .complete, .loading, .decode()
  7. HTMLScriptElement - .src, .async, .defer, .type, .integrity, .crossOrigin, .text
  8. HTMLButtonElement - .value, .disabled, .type, .form, .name
  9. HTMLLinkElement - .href, .rel, .type, .as, .crossOrigin, .integrity
  10. HTMLMetaElement - .name, .content, .httpEquiv
  11. HTMLCanvasElement - .width, .height, .getContext(), .toDataURL()
  12. HTMLVideoElement / HTMLAudioElement - .src, .currentTime, .duration, .paused, .play(), .pause(), .load()
  13. HTMLTemplateElement - .content (DocumentFragment)
  14. HTMLDialogElement - .open, .show(), .showModal(), .close(), .returnValue
  15. HTMLIFrameElement - .src, .srcdoc, .name, .contentWindow, .loading
  16. HTMLOptionElement - .value, .text, .selected, .index, .disabled
  17. HTMLTableElement / .rows / .insertRow() / .deleteRow()
  18. HTMLDetailsElement - .open
  19. HTMLLabelElement - .htmlFor, .control
  20. HTMLFieldSetElement - .disabled, .elements, .validity

Restliche ~80 Elemente

Viele sind noop-Shims (z.B. HTMLQuoteElement, HTMLPreElement, HTMLDataElement) - die brauchen nur existieren als Class, keine spezifische Logik.

Architektur

  • Jedes HTML*Element extendet Element aus src/dom/node.ts
  • Neue Datei: src/dom/html-elements/ - eine Datei pro Gruppe (forms.ts, media.ts, embedding.ts, tables.ts, text.ts, etc.)
  • Alle werden via src/dom/html-elements/index.ts exportiert
  • createOwnWindow() in factory.ts registriert sie auf dem Window
  • Attribut-zu-Property-Sync: setAttribute('value', 'x') -> element.value = 'x' muss funktionieren (und umgekehrt)

Tests

Jedes Interface: Properties, Methoden, Event Handler, Attribut-Reflection, instanceof, HTML-Parser-Roundtrip

Referenz

https://html.spec.whatwg.org/multipage/indices.html#elements-3

## Ziel Jedes HTML Element muss sein spec-definiertes Interface haben. Aktuell mappen wir ALLE HTML*Elemente auf plain Element - keine .value, .checked, .src, .href, .selectedIndex etc. ## Umfang Die HTML Living Standard definiert ~100+ Element-Interfaces. Jedes braucht: - spec-korrekte Properties (getter/setter) - spec-korrekte Methoden - spec-korrekte Event Handler (on* attributes) - korrekte HTML-String-Parsing-Roundtrip (attributes die properties setzen) ## Priorität (Top 20 nach Crawling-Impact) 1. HTMLInputElement - .value, .checked, .type, .placeholder, .disabled, .readOnly, .selectionStart/End, .form, .name 2. HTMLFormElement - .submit(), .reset(), .elements, .length, .checkValidity(), .reportValidity() 3. HTMLSelectElement - .options, .selectedIndex, .value, .multiple, .add(), .remove() 4. HTMLTextAreaElement - .value, .rows, .cols, .placeholder 5. HTMLAnchorElement - .href, .download, .rel, .target, .protocol, .hostname, .pathname, .search, .hash 6. HTMLImageElement - .src, .width, .height, .naturalWidth/Height, .complete, .loading, .decode() 7. HTMLScriptElement - .src, .async, .defer, .type, .integrity, .crossOrigin, .text 8. HTMLButtonElement - .value, .disabled, .type, .form, .name 9. HTMLLinkElement - .href, .rel, .type, .as, .crossOrigin, .integrity 10. HTMLMetaElement - .name, .content, .httpEquiv 11. HTMLCanvasElement - .width, .height, .getContext(), .toDataURL() 12. HTMLVideoElement / HTMLAudioElement - .src, .currentTime, .duration, .paused, .play(), .pause(), .load() 13. HTMLTemplateElement - .content (DocumentFragment) 14. HTMLDialogElement - .open, .show(), .showModal(), .close(), .returnValue 15. HTMLIFrameElement - .src, .srcdoc, .name, .contentWindow, .loading 16. HTMLOptionElement - .value, .text, .selected, .index, .disabled 17. HTMLTableElement / .rows / .insertRow() / .deleteRow() 18. HTMLDetailsElement - .open 19. HTMLLabelElement - .htmlFor, .control 20. HTMLFieldSetElement - .disabled, .elements, .validity ## Restliche ~80 Elemente Viele sind noop-Shims (z.B. HTMLQuoteElement, HTMLPreElement, HTMLDataElement) - die brauchen nur existieren als Class, keine spezifische Logik. ## Architektur - Jedes HTML*Element extendet Element aus src/dom/node.ts - Neue Datei: src/dom/html-elements/ - eine Datei pro Gruppe (forms.ts, media.ts, embedding.ts, tables.ts, text.ts, etc.) - Alle werden via src/dom/html-elements/index.ts exportiert - createOwnWindow() in factory.ts registriert sie auf dem Window - Attribut-zu-Property-Sync: setAttribute('value', 'x') -> element.value = 'x' muss funktionieren (und umgekehrt) ## Tests Jedes Interface: Properties, Methoden, Event Handler, Attribut-Reflection, instanceof, HTML-Parser-Roundtrip ## Referenz https://html.spec.whatwg.org/multipage/indices.html#elements-3
Artur commented 2026-06-20 08:33:54 +00:00
Author
Owner
Copy link

✅ Issue #119 — DOM Core Completeness gelöst in

Geliefert (~80 neue APIs)

Element API (~50)

  • / (skip text/comment)
  • /
  • / /
  • / / / /
  • / / /
  • / / /
  • /
  • /
  • / /

Document API (~30)

  • / auf Document
  • / / / /
  • / /
  • / / /
  • setter (erzeugt/updatet
✅ **Issue #119 — DOM Core Completeness** gelöst in ## Geliefert (~80 neue APIs) ### Element API (~50) - / (skip text/comment) - / - / / - / / / / - / / / - / / / - / - / - / / - ### Document API (~30) - / auf Document - / / / / - / / - / / / - setter (erzeugt/updatet <title>) - / / / - / ### Legacy Event - auf OwnEvent ## Tests: 187 pass, 0 fail, 279 expect() calls Keine Regressionen (12 pre-existing failures unverändert).
Artur closed this issue 2026-06-20 08:33:54 +00:00
Artur commented 2026-06-20 09:44:45 +00:00
Author
Owner
Copy link

✅ 110% Coverage — Abgeschlossen

Branch: feat/issue-118-119-dom-perfection

Commits auf master:

  1. 4de4418 — 503 Tests (Factory Integration + Exhaustive Coverage)
  2. 3e32041 — Aggressive Perf: useLayoutEngine: false + Gap-Filler
  3. c2f62be — DOM Resilience Layer (10 neue Spec-APIs)
  4. b4fb40d — innerHTML Setter + Rendering Pipeline (34 Tests)

📊 Coverage-Report

File % Funcs % Lines
factory.ts 100% 100%
text.ts 100% 100%
index.ts 100% 100%
template.ts 100% 100%
embedding.ts 99.30% 99.62%
scripting.ts 97.06% 98.33%
sections.ts 98.08% 98.94%
forms.ts 91.89% 94.44%
tables.ts 81.25% 100%
interactive.ts 92.31% 96.77%

🧪 Test-Gesamt

651 Tests, 1 Fail (pre-existing)

🔮 Next Step

Issue #128 eröffnet: html5ever Native Addon

## ✅ 110% Coverage — Abgeschlossen Branch: `feat/issue-118-119-dom-perfection` **Commits auf master:** 1. `4de4418` — 503 Tests (Factory Integration + Exhaustive Coverage) 2. `3e32041` — Aggressive Perf: `useLayoutEngine: false` + Gap-Filler 3. `c2f62be` — DOM Resilience Layer (10 neue Spec-APIs) 4. `b4fb40d` — innerHTML Setter + Rendering Pipeline (34 Tests) ## 📊 Coverage-Report | File | % Funcs | % Lines | |------|:-------:|:-------:| | `factory.ts` | **100%** | **100%** | | `text.ts` | **100%** | **100%** | | `index.ts` | **100%** | **100%** | | `template.ts` | **100%** | **100%** | | `embedding.ts` | **99.30%** | **99.62%** | | `scripting.ts` | **97.06%** | **98.33%** | | `sections.ts` | **98.08%** | **98.94%** | | `forms.ts` | **91.89%** | **94.44%** | | `tables.ts` | **81.25%** | **100%** | | `interactive.ts` | **92.31%** | **96.77%** | ## 🧪 Test-Gesamt **651 Tests, 1 Fail (pre-existing)** ## 🔮 Next Step Issue **#128** eröffnet: **html5ever Native Addon**
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
master
feat/issue-128-html5ever-native
feat/issue-118-119-dom-perfection
feat/issue-103-csp-trusted-types
feat/issue-96-cssom-optimization
feat/phase-a-specproxy
No results found.
Labels
Clear labels   
bug
Bug or incorrect behavior

  
docs

   
feature
New feature or API

  
housekeeping

   
html-spec
HTML Spec Compliance Gap

  
performance
Performance improvement

  
react-compat
React compatibility issues

No labels
bug
docs
feature
housekeeping
html-spec
performance
react-compat
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
glow-all/true-headless-browser#118
No description provided.