Custom Elements + Shadow DOM Shim #20

New issue

Closed

opened 2026-06-17 14:01:50 +00:00 by Artur · 1 comment

Artur commented

2026-06-17 14:01:50 +00:00

Owner

Goal

Implement customElements.define(), customElements.get(), customElements.whenDefined(), and element.attachShadow().

What to Build

src/custom-elements/shim.ts — CustomElementRegistry class
Register globalThis.customElements in createIsolatedContext
HTMLElement.prototype.attachShadow returns minimal ShadowRoot
ShadowRoot: mode, host, innerHTML, querySelector, appendChild

Tests (110%)

customElements is defined
customElements.define() registers element
customElements.get() returns constructor
customElements.whenDefined() resolves
element.attachShadow returns ShadowRoot
ShadowRoot.mode reflects open/closed
ShadowRoot.host returns element
element.shadowRoot returns the shadowRoot
shadowRoot.querySelector works
shadowRoot.querySelectorAll works
shadowRoot.appendChild works
shadowRoot.innerHTML getter/setter works
attachShadow({mode: 'closed'}) hides shadowRoot

Definition of Done

CustomElementRegistry with define/get/whenDefined
attachShadow returns minimal ShadowRoot
All ShadowRoot API methods work
Tests pass with 100% line coverage

## Goal Implement customElements.define(), customElements.get(), customElements.whenDefined(), and element.attachShadow(). ## What to Build 1. `src/custom-elements/shim.ts` — CustomElementRegistry class 2. Register globalThis.customElements in createIsolatedContext 3. HTMLElement.prototype.attachShadow returns minimal ShadowRoot 4. ShadowRoot: mode, host, innerHTML, querySelector, appendChild ## Tests (110%) - customElements is defined - customElements.define() registers element - customElements.get() returns constructor - customElements.whenDefined() resolves - element.attachShadow returns ShadowRoot - ShadowRoot.mode reflects open/closed - ShadowRoot.host returns element - element.shadowRoot returns the shadowRoot - shadowRoot.querySelector works - shadowRoot.querySelectorAll works - shadowRoot.appendChild works - shadowRoot.innerHTML getter/setter works - attachShadow({mode: 'closed'}) hides shadowRoot ## Definition of Done - [ ] CustomElementRegistry with define/get/whenDefined - [ ] attachShadow returns minimal ShadowRoot - [ ] All ShadowRoot API methods work - [ ] Tests pass with 100% line coverage