JSPM

@webcomponents/scoped-custom-element-registry

0.0.10
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 26958
  • Score
    100M100P100Q160043F
  • License BSD-3-Clause

Scoped CustomElementRegistry Polyfill

Package Exports

  • @webcomponents/scoped-custom-element-registry
  • @webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@webcomponents/scoped-custom-element-registry) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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