0.2.0 • Published 3 years ago
scoped-registries v0.2.0
Scoped Custom Element Registries Polyfill
This is a polyfill for allowing Scoped Custom Element Registries. It has been tested in Chrome, Safari and WebKit. This polyfill works scoping the custom element tag names.
Reference Documentation
- w3c / webcomponents
- Justin Fagnani explanation
- Scoped Elements - Proposal to align the API with CustomElementsRegistry
TODO
CustomElementRegistry
CustomElementRegistry()
- CustomElementRegistry is constructable.
CustomElementRegistry.prototype.get(name: string)
:get()
now returns the closest constructor defined for a tag name in a chain of registries.CustomElementRegistry.prototype.getRegistry(name: string)
: Returns the closest registry in which a tag name is defined.define()
returns a new class. The constructor returned bydefine()
is from a trivial subclass of the registered class.
ShadowRoot
customElements: CustomElementRegistry
: TheCustomElementRegistry
theShadowRoot
uses, set onattachShadowRoot()
.createElement()
: create new elements using theCustomElementRegistry
of theShadowRoot
.createElementNS()
: create new elements using theCustomElementRegistry
of theShadowRoot
.importNode()
: Imports a node into the document that owns theShadowRoot
, using theCustomElementRegistry
of theShadowRoot
. This enables cloning a template into multiple scopes to use different custom element definitions.innerHTML
querySelector()
: Must transform the tag selector to search by the scoped ones.querySelectorAll()
: Must transform the tag selector to search by the scoped ones.- Styles
- Styles inside the
style
tag name - Styles using
CSSStyleSheet
- Styles inside the
Element
Element.prototype.scope: Document | ShadowRoot
: Elements have DOM creation APIs, likeinnerHTML
, so they need a reference to their scope. Elements expose this with a scope property. One difference between this andgetRootNode()
is that the scope for an element can never change.Element.prototype.attachShadow(init: ShadowRootInit)
:ShadowRootInit
adds a new property,customElements
, in its options argument which is aCustomElementRegistry
.innerHTML
tagName
querySelector()
: Must transform the tag selector to search by the scoped ones.querySelectorAll()
: Must transform the tag selector to search by the scoped ones.getElementsByTagName()
: Must transform the tag name to search by the scoped one.getElementsByTagNameNS()
: Must transform the tag name to search by the scoped one.
Limit custom elements constructors by default to only looking up registrations from the global registry.
Limitations
There are some limitations on the use of this polyfill.
- Importing a Node tree with an upgraded custom-element and styles into a shadowRoot: The custom element is going to maintain the upgraded instance, but styles are going to be scoped, so it could cause a visual problem in the case styles are using the custom element tag name.