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 by define() is from a trivial subclass of the registered class.

• ShadowRoot

  • customElements: CustomElementRegistry: The CustomElementRegistry the ShadowRoot uses, set on attachShadowRoot().
  • createElement(): create new elements using the CustomElementRegistry of the ShadowRoot.
  • createElementNS(): create new elements using the CustomElementRegistry of the ShadowRoot.
  • importNode(): Imports a node into the document that owns the ShadowRoot, using the CustomElementRegistry of the ShadowRoot. 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

• Element

  • Element.prototype.scope: Document | ShadowRoot: Elements have DOM creation APIs, like innerHTML, so they need a reference to their scope. Elements expose this with a scope property. One difference between this and getRootNode() 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 a CustomElementRegistry.
  • 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.