wc-putty

Complementary polyfills for @webcomponents/webcomponentsjs

List of Polyfills

Property/Method	Target Class	Target Browsers	Features
attributeChangedCallback()	Custom element base class	IE 11, Edge, Safari 9	Attribute changes via properties
children	DocumentFragment	IE 11
children	SVGElement	IE 11
from()	Array	IE 11	Iterable protocol
constructor()	Set	IE 11	Iterable initializer
Symbol.species	Set	IE 11
Symbol.iterator	Set	IE 11
values()	Set	IE 11
add()	Set	IE 11	Key equality for -0 and 0
has()	Set	IE 11	Key equality for -0 and 0
constructor()	Map	IE 11	Iterable initializer
Symbol.species	Map	IE 11
Symbol.iterator	Map	IE 11
keys()	Map	IE 11
values()	Map	IE 11
entries()	Map	IE 11
set()	Map	IE 11	Key equality for -0 and 0
has()	Map	IE 11	Key equality for -0 and 0

Install

    npm install wc-putty

Import

    import { polyfill } from 'wc-putty/polyfill.js';

Usage

    // Polyfilled only on IE11, Edge, and Safari 9
    class MyElement extends polyfill(HTMLElement) {
      static get observedAttributes() { return [ 'lang' ] }
      attributeChangedCallback(name, oldValue, newValue) {
        // Attribute changes via built-in properties such as lang are detected properly
        // Attribute changes via setAttribute() are detected and the method is called only once per change
      }
    }
    customElements.define('my-element', MyElement);
    // Triggers attributeChangedCallback('lang', null, 'en-US')
    document.createElement('my-element').lang = 'en-US';

    // Polyfilled only on IE 11
    // Set
    let set = new Set([0, -0, 1]);
    set.size === 2; // key equality for -0 and 0
    set.has(-0) && set.has(0) && set.has(1);
    [...set]; // spread iterable
    for (let item of set) {} // iterate over a Set object
    // Map
    let map = new Map((function * () { yield * [0, -0, 1]; })());
    map.size === 2; // key equality for -0 and 0
    map.has(-0) && map.has(0) && map.has(1);

Notes

• The polyfills are complementary to @webcomponents/webcomponentsjs
  • @webcomponents/webcomponentsjs/webcomponents-{bundle|loader}.js have to be loaded beforehand
• The polyfills are adaptive
  • They do not touch the target classes if the features are supported natively or currently polyfilled and functional
• Global objects are polyfilled except for attributeChangedCallback()
• The main module polyfill.js is provided as an ES module and evaluated only once to polyfill the target global objects
• Transpilation for the target browsers is required
  • Basic polyfills such as babel runtime have to be loaded beforehand
• Bundling is required if the target browser does not support ES modules natively
• Attribute changes via setAttributeNS() can trigger 2 calls of attributeChangedCallback() if polyfilled by polyfill() mixin

License

BSD-2-Clause