webcomponentsjs 0,0,6,0,5,5,4,0 Bower npm

A suite of polyfills supporting the HTML Web Components specs

2 years after BSD-3-Clause

webcomponents.js (v1 spec polyfills)

Build Status

Note. For polyfills that work with the older Custom Elements and Shadow DOM v0 specs, see the v0 branch.

A suite of polyfills supporting the Web Components specs:

  • Custom Elements v1: allows authors to define their own custom tags (spec, tutorial).
  • HTML Imports: a way to include and reuse HTML documents via other HTML documents (spec, tutorial).
  • Shadow DOM v1: provides encapsulation by hiding DOM subtrees under shadow roots (spec, tutorial).

For browsers that need it, there are also some minor polyfills included:

How to use

The polyfills are built (concatenated & minified) into several bundles that target different browsers and spec readiness:

  • webcomponents-hi.js -- HTML Imports (needed by Safari Tech Preview)
  • webcomponents-hi-ce.js -- HTML Imports and Custom Elements v1 (needed by Safari 10)
  • webcomponents-hi-sd-ce.js -- HTML Imports, Custom Elements v1 and Shady DOM/CSS (needed by Safari 9, Firefox, Edge)
  • webcomponents-sd-ce.js -- Custom Elements and Shady DOM/CSS (no HTML Imports)
  • webcomponents-lite.js -- all of the polyfills: HTML Imports, Custom Elements, Shady DOM/CSS and generic platform polyfills (such as ES6 Promise, Constructable events, etc.) (needed by Internet Explorer 11), and Template (needed by IE 11 and Edge)

If you are only targeting a specific browser, you can just use the bundle that's needed by it; alternatively, if your server is capable of serving different assets based on user agent, you can send the polyfill bundle that's necessary for the browser making that request.


Alternatively, this repo also comes with webcomponents-loader.js, a client-side loader that dynamically loads the minimum polyfill bundle, using feature detection. Note that because the bundle will be loaded asynchronously, you should wait for the WebComponentsReady before you can safely assume that all the polyfills have loaded and are ready to be used (i.e. if you want to dynamically load other custom elements, etc.).

Additionally, you can check if window.WebComponents exists to know if the WebComponentsReady event will fire, and you can check if window.WebComponents.ready is true to check if the WebComponentsReady event has already fired.

Here's an example:

<!-- Load polyfills; note that "loader" will load these async -->
<script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>

<!-- Load a custom element definition via HTMLImports -->
<link rel="import" href="my-element.html">

<!-- Use the custom element -->

<!-- Interact with the upgraded element -->
  window.addEventListener('WebComponentsReady', function() {
    // At this point we are guaranteed that all required polyfills have loaded,
    // all HTML imports have loaded, and all defined custom elements have upgraded
    let MyElement = customElements.get('my-element');
    let element = document.querySelector('my-element');
    console.assert(element instanceof MyElement);  // 

Related Repositories



Build modern apps using web components ...



Web component extensions to the standard <time> element. ...



This is a guide intended to introduce to Web Components. Everyone can contribute ...



Web Component for generating QR codes ...

Top Contributors

azakus sorvell addyosmani garlicnation nevir kevinpschaaf jmesserly nazar-pc eeid26 talee bicknellr justinfagnani koenkivits jakemac53 jacobrossi jbca vicb keanulee rictic sjmiles timoxley mysticatea ebidel DnMllr jmalonzo tjsavage NoyaInRain EisenbergEffect bouk 0x24a537r9


package version
dev @webcomponents/custom-elements ^1.0.0
@webcomponents/html-imports ^1.0.0
@webcomponents/shadycss ^1.0.3
@webcomponents/shadydom ^1.0.0
@webcomponents/template ^1.0.0
@webcomponents/webcomponents-platform ^1.0.0
babel-preset-babili ^0.1.4
bower ^1.8.0
del ^3.0.0
es6-promise ^4.1.1
eslint ^3.16.1
google-closure-compiler ^20170626.0.0
gulp ^3.8.8
gulp-rename ^1.2.2
gulp-sourcemaps ^2.4.1
rollup-plugin-babel ^2.7.1
rollup-stream ^1.23.1
run-sequence ^2.0.0
vinyl-buffer ^1.0.0
vinyl-source-stream ^1.1.0
web-component-tester ^6.0.0


-   v0.7.22 zip tar
-   v0.7.21 zip tar
-   v0.7.20 zip tar
-   v0.7.19 zip tar
-   v0.7.18 zip tar
-   v0.7.17 zip tar
-   v0.7.16 zip tar
-   v0.7.15 zip tar
-   v0.7.14 zip tar
-   v0.7.13 zip tar
-   v0.7.12 zip tar
-   v0.7.11 zip tar
-   v0.7.10 zip tar
-   v0.7.9 zip tar
-   v0.7.8 zip tar
-   v0.7.7 zip tar
-   v0.7.6 zip tar
-   v0.7.5 zip tar
-   v0.7.4 zip tar
-   v0.7.3 zip tar
-   v0.7.2 zip tar
-   v0.7.1 zip tar
-   v0.7.0 zip tar
-   v0.6.3 zip tar
-   v0.6.2 zip tar
-   v0.6.1 zip tar
-   v0.6.0 zip tar
-   v0.4.2 zip tar
-   0.6.0 zip tar
-   0.5.5 zip tar