Nagging Mario's Princess

    webcomponents-lite

    0.6.0 • Public • Published

    webcomponents.js

    Join the chat at https://gitter.im/webcomponents/webcomponentsjs

    A suite of polyfills supporting the Web Components specs:

    Custom Elements: allows authors to define their own custom tags (spec).

    HTML Imports: a way to include and reuse HTML documents via other HTML documents (spec).

    Shadow DOM: provides encapsulation by hiding DOM subtrees under shadow roots (spec).

    This also folds in polyfills for MutationObserver and WeakMap.

    Releases

    Pre-built (concatenated & minified) versions of the polyfills are maintained in the tagged versions of this repo. There are two variants:

    webcomponents.js includes all of the polyfills.

    webcomponents-lite.js includes all polyfills except for shadow DOM.

    Browser Support

    Our polyfills are intended to work in the latest versions of evergreen browsers. See below for our complete browser support matrix:

    Polyfill IE10 IE11+ Chrome* Firefox* Safari 7+* Chrome Android* Mobile Safari*
    Custom Elements ~
    HTML Imports ~
    Shadow DOM
    Templates

    *Indicates the current version of the browser

    ~Indicates support may be flaky. If using Custom Elements or HTML Imports with Shadow DOM, you will get the non-flaky Mutation Observer polyfill that Shadow DOM includes.

    The polyfills may work in older browsers, however require additional polyfills (such as classList) to be used. We cannot guarantee support for browsers outside of our compatibility matrix.

    Manually Building

    If you wish to build the polyfills yourself, you'll need node and gulp on your system:

    • install node.js using the instructions on their website
    • use npm to install gulp.js: npm install -g gulp

    Now you are ready to build the polyfills with:

    # install dependencies
    npm install
    # build
    gulp build
    

    The builds will be placed into the dist/ directory.

    Contribute

    See the contributing guide

    License

    Everything in this repository is BSD style license unless otherwise specified.

    Copyright (c) 2015 The Polymer Authors. All rights reserved.

    Known Issues

    Custom element's constructor property is unreliable

    See #215 for background.

    In Safari and IE, instances of Custom Elements have a constructor property of HTMLUnknownElementConstructor and HTMLUnknownElement, respectively. It's unsafe to rely on this property for checking element types.

    It's worth noting that customElement.__proto__.__proto__.constructor is HTMLElementPrototype and that the prototype chain isn't modified by the polyfills(onto ElementPrototype, etc.)

    Contenteditable elements do not trigger MutationObserver

    Using the MutationObserver polyfill, it isn't possible to monitor mutations of an element marked contenteditable. See the mailing list

    ShadowCSS: :host-context(...):host(...) doesn't work

    See #16 for background.

    Under the shadow DOM polyfill, rules like:

    :host-context(.foo):host(.bar) {...}
    

    don't work, despite working under native Shadow DOM. The solution is to use polyfill-next-selector like:

    polyfill-next-selector { content: '.foo :host.bar, :host.foo.bar'; }
    

    execCommand and contenteditable isn't supported under Shadow DOM

    See #212

    execCommand, and contenteditable aren't supported under the ShadowDOM polyfill, with commands that insert or remove nodes being especially prone to failure.

    Install

    npm i webcomponents-lite

    DownloadsWeekly Downloads

    40

    Version

    0.6.0

    License

    BSD

    Last publish

    Collaborators

    • addyosmani
    • garlicnation
    • azakus