Skip to content
This repository has been archived by the owner on Jan 15, 2019. It is now read-only.

WebReflection/built-in-element

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

built-in-element

Build Status WebReflection status

A polyfill for Custom Elements built-in that patches the native registry in Safari and WebKit and it's compatible with the Custom Elements polyfill.

It doesn't touch Chrome and Firefox 63+ with native support, and it weights less than 1K.

Caveat

You cannot use the constructor in any meaningful way if you want to ensure API consistency.

Create new elements via document.createElement('button', {is: 'my-button'}) but do not use new MyButton or incompatible browsers will throw right away because they made HTMLButtonElement and all others not usable as classes.

If you need a reliable entry point to setup your custom builtins use the connectedCallback method instead of the constructor so you're also sure all attributes are eventually already known and you'll have full control.

Alternatively, use a WeakSet to optionally invoke a setup.

const initialized = new WeakSet;
const setup = node => {
  initialized.add(node);
  node.live = true;
};
class MyButton extends HTMLButtonElement {
  connectedCallback() {
    if (!initialized.has(this))
      setup(this);
    // anything else
  }
}

You can do the same at the beginning of attributeChangedCallback.

Compatible with ...

Any engine that supports genuine ES2015 syntax and the following features:

  • global MutationObserver, customElements, and Promise
  • assign, create, defineProperties, and setPrototypeOf from the Object

Alternatively, you can polyfill custom elements upfront and use Babel 7 to target older browsers.

Feel free to live test the native ES2015 version or the transpiled one, which works down to IE9.