@webcomponents/scoped-custom-element-registry NPM

Scoped CustomElementRegistry polyfill prototype

🚨 Work in progress

This polyfill explores implementation of a non-finalized spec proposal and is currently a work in progress.

Overview

Scoped CustomElementRegistry polyfill based on Scoped Custom Element Registries WICG proposal.

Technique: uses native CustomElements to register stand-in classes that delegate to the constructor in the registry for the element's scope; this avoids any manual treewalks to identify custom elements that need upgrading. Constructor delegation is achieved by constructing a bare HTMLElement, inspecting its tree scope (or the tree scope of the node it was created via) to determine its registry, and then applying the "constructor call trick" to upgrade it.

Notes/limitations:

In order to leverage native CE when available, observedAttributes handling must be simulated by patching setAttribute/getAttribute/toggleAttribute to call attributeChangedCallback manually, since while we can delegate constructors, the observedAttributes respected by the browser are fixed at define time. This means that native reflecting properties are not observable when set via properties.
In theory, this should be able to be layered on top of the Custom Elements polyfill for use on older browsers, although this is yet to be tested. Use of Reflect.construct may need to be modified in those cases

Outstanding TODOs:

#419: Convert source to TS (to match convention in this monorepo)
#420: Test and work out layering strategy with standard custom-elements polyfill
#421: Test and work out layering strategy with shady-dom & shady-css polyfills
#422: Add benchmarks