wc-putty v0.1.0

wc-putty

Complementary polyfills for @webcomponents/webcomponentsjs

List of Polyfills

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