Scoped CustomElementRegistry Polyfill
npm install @webcomponents/scoped-custom-element-registryThis polyfill explores implementation of a non-finalized spec proposal and is
currently a work in progress.
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