40 lines
2.0 KiB
Markdown
40 lines
2.0 KiB
Markdown
|
# 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](https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Scoped-Custom-Element-Registries.md)
|
||
|
|
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](https://github.com/webcomponents/polyfills/issues/419): Convert source to TS (to match convention in this monorepo)
|
||
|
|
- [ ] [#420](https://github.com/webcomponents/polyfills/issues/420): Test and work out layering strategy with standard custom-elements polyfill
|
||
|
|
- [ ] [#421](https://github.com/webcomponents/polyfills/issues/421): Test and work out layering strategy with shady-dom & shady-css polyfills
|
||
|
|
- [ ] [#422](https://github.com/webcomponents/polyfills/issues/422): Add benchmarks
|