{"id":15048381,"url":"https://github.com/github/webcomponentsjs","last_synced_at":"2025-10-04T08:31:40.810Z","repository":{"id":65974915,"uuid":"113299504","full_name":"github/webcomponentsjs","owner":"github","description":"A suite of polyfills supporting the HTML Web Components specs","archived":true,"fork":true,"pushed_at":"2019-10-01T09:27:43.000Z","size":14505,"stargazers_count":16,"open_issues_count":1,"forks_count":12,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-09-25T21:11:08.134Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://webcomponents.org/polyfills/","language":"HTML","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"webcomponents/webcomponentsjs","license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/github.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-12-06T10:00:11.000Z","updated_at":"2024-07-31T03:18:14.000Z","dependencies_parsed_at":"2023-02-19T18:01:20.960Z","dependency_job_id":null,"html_url":"https://github.com/github/webcomponentsjs","commit_stats":null,"previous_names":[],"tags_count":74,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/github%2Fwebcomponentsjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/github%2Fwebcomponentsjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/github%2Fwebcomponentsjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/github%2Fwebcomponentsjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/github","download_url":"https://codeload.github.com/github/webcomponentsjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219876581,"owners_count":16554769,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-09-24T21:11:13.551Z","updated_at":"2025-10-04T08:31:35.392Z","avatar_url":"https://github.com/github.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"webcomponents.js (v1 spec polyfills)\n================\n\n[![Build Status](https://travis-ci.org/webcomponents/webcomponentsjs.svg?branch=master)](https://travis-ci.org/webcomponents/webcomponentsjs)\n\n\u003e **Note**. For polyfills that work with the older Custom Elements and Shadow DOM v0 specs, see the [v0 branch](https://github.com/webcomponents/webcomponentsjs/tree/v0).\n\nA suite of polyfills supporting the [Web Components](http://webcomponents.org) specs:\n\n- **Custom Elements v1**: allows authors to define their own custom tags ([spec](https://w3c.github.io/webcomponents/spec/custom/), [tutorial](https://developers.google.com/web/fundamentals/getting-started/primers/customelements)).\n- **HTML Imports**: a way to include and reuse HTML documents via other HTML documents ([spec](https://w3c.github.io/webcomponents/spec/imports/), [tutorial](https://www.html5rocks.com/en/tutorials/webcomponents/imports/)).\n- **Shadow DOM v1**: provides encapsulation by hiding DOM subtrees under shadow roots ([spec](https://w3c.github.io/webcomponents/spec/shadow/), [tutorial](https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom)).\n\nFor browsers that need it, there are also some minor polyfills included:\n- [`HTMLTemplateElement`](https://github.com/webcomponents/template)\n- [`Promise`](https://github.com/stefanpenner/es6-promise)\n- `Event`, `CustomEvent`, `MouseEvent` constructors and `Object.assign`, `Array.from` (see [webcomponents-platform](https://github.com/webcomponents/webcomponents-platform))\n\n## How to use\n\nThe polyfills are built (concatenated \u0026 minified) into several bundles that target\ndifferent browsers and spec readiness:\n\n- `webcomponents-hi.js` -- HTML Imports (needed by Safari Tech Preview)\n- `webcomponents-hi-ce.js` -- HTML Imports and Custom Elements v1 (needed by Safari 10)\n- `webcomponents-hi-sd-ce.js` -- HTML Imports, Custom Elements v1 and Shady DOM/CSS (needed by Safari 9, Firefox, Edge)\n- `webcomponents-sd-ce.js` -- Custom Elements and Shady DOM/CSS (no HTML Imports)\n- `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)\n\nIf you are only targeting a specific browser, you can just use the bundle that's\nneeded 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.\n\n## `webcomponents-loader.js`\nAlternatively, this repo also comes with `webcomponents-loader.js`, a client-side\nloader that dynamically loads the minimum polyfill bundle, using feature detection.\nNote that because the bundle will be loaded asynchronously, you should wait for the `WebComponentsReady` before you can safely assume that all the polyfills have\nloaded and are ready to be used (i.e. if you want to dynamically load other custom\nelements, etc.).\n\nAdditionally, 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.\n\nHere's an example:\n\n```html\n\u003c!-- Load polyfills; note that \"loader\" will load these async --\u003e\n\u003cscript src=\"bower_components/webcomponentsjs/webcomponents-loader.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Load a custom element definition via HTMLImports --\u003e\n\u003clink rel=\"import\" href=\"my-element.html\"\u003e\n\n\u003c!-- Use the custom element --\u003e\n\u003cmy-element\u003e\u003c/my-element\u003e\n\n\u003c!-- Interact with the upgraded element --\u003e\n\u003cscript\u003e\n  window.addEventListener('WebComponentsReady', function() {\n    // At this point we are guaranteed that all required polyfills have loaded,\n    // all HTML imports have loaded, and all defined custom elements have upgraded\n    let MyElement = customElements.get('my-element');\n    let element = document.querySelector('my-element');\n    console.assert(element instanceof MyElement);  // 👍\n    element.someAPI(); // 👍\n  });\n\u003c/script\u003e\n```\n\n## `custom-elements-es5-adapter.js`\nAccording to the spec, Custom Elements must be ES6 classes (https://html.spec.whatwg.org/multipage/scripting.html#custom-element-conformance). Since most projects need to support a wide range of browsers that don't necessary support ES6, it may make sense to compile your project to ES5. However, ES5-style custom element classes will **not** work with native Custom Elements because ES5-style classes cannot properly extend ES6 classes, like `HTMLElement`.\n\nTo work around this, load `custom-elements-es5-adapter.js` before declaring new Custom Elements.\n\n**The adapter must NOT be compiled.**\n\n```html\n\u003c!-- Load Custom Elements es5 adapter --\u003e\n\u003cscript src=\"bower_components/webcomponentsjs/custom-elements-es5-adapter.js\"\u003e\u003c/script\u003e\n\u003c!-- Load polyfills; note that \"loader\" will load these async --\u003e\n\u003cscript src=\"bower_components/webcomponentsjs/webcomponents-loader.js\"\u003e\u003c/script\u003e\n\u003c!-- Load the es5 compiled custom element definition --\u003e\n\u003clink rel=\"import\" href=\"my-es5-element.html\"\u003e\n\n\u003c!-- Use the custom element --\u003e\n\u003cmy-es5-element\u003e\u003c/my-es5-element\u003e\n```\n\n## Browser Support\n\nThe polyfills are intended to work in the latest versions of evergreen browsers. See below\nfor our complete browser support matrix:\n\n| Polyfill   | IE11+ | Chrome* | Firefox* | Safari 9+* | Chrome Android* | Mobile Safari* |\n| ---------- |:-----:|:-------:|:--------:|:----------:|:---------------:|:--------------:|\n| Custom Elements | ✓ | ✓ | ✓ | ✓ | ✓| ✓ |\n| HTML Imports |  ✓ | ✓ | ✓ | ✓| ✓| ✓ |\n| Shady CSS/DOM |  ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |\n\n\\*Indicates the current version of the browser\n\nThe polyfills may work in older browsers, however require additional polyfills (such as classList, or other [platform](https://github.com/webcomponents/webcomponents-platform)\npolyfills) to be used. We cannot guarantee support for browsers outside of our compatibility matrix.\n\n\n### Manually Building\n\nIf you wish to build the bundles yourself, you'll need `node` and `npm` on your system:\n\n * install [node.js](http://nodejs.org/) using the instructions on their website\n * use `npm` to install [gulp.js](http://gulpjs.com/): `npm install -g gulp`\n\nNow you are ready to build the polyfills with:\n\n    # install dependencies\n    npm install\n    bower install\n    # build\n    gulp\n\nThe builds will be placed into the root directory.\n\n## Contribute\n\nSee the [contributing guide](CONTRIBUTING.md)\n\n## License\n\nEverything in this repository is BSD style license unless otherwise specified.\n\nCopyright (c) 2015 The Polymer Authors. All rights reserved.\n\n## Helper utilities\n\n### `WebComponentsReady`\n\nUnder native HTML Imports, `\u003cscript\u003e` tags in the main document block the loading of such imports. This is to ensure the imports have loaded and any registered elements in them have been upgraded.\n\nThe `webcomponents-lite.js` polyfill (as well as the smaller bundles and the loader) parse element definitions and handle their upgrade asynchronously. If prematurely fetching the element from the DOM before it has an opportunity to upgrade, you'll be working with an `HTMLUnknownElement`.\n\nFor these situations, you can use the `WebComponentsReady` event as a signal before interacting with the element. The criteria for this event to fire is all Custom Elements with definitions registered by the time HTML Imports available at load time have loaded have upgraded.\n\n```js\nwindow.addEventListener('WebComponentsReady', function(e) {\n  // imports are loaded and elements have been registered\n  console.log('Components are ready');\n});\n```\n\n## Known Issues\n\n  * [ShadowDOM CSS is not encapsulated out of the box](#shadycss)\n  * [Custom element's constructor property is unreliable](#constructor)\n  * [Contenteditable elements do not trigger MutationObserver](#contentedit)\n  * [ShadyCSS: :host(.zot:not(.bar:nth-child(2))) doesn't work](#nestedparens)\n  \n### ShadowDOM CSS is not encapsulated out of the box \u003ca id=\"shadycss\"\u003e\u003c/a\u003e\nThe ShadowDOM polyfill is not able to encapsulate CSS in ShadowDOM out of the box. You need to use specific code from the ShadyCSS library, included with the polyfill. See [ShadyCSS instructions](https://github.com/webcomponents/shadycss).\n\n### Custom element's constructor property is unreliable \u003ca id=\"constructor\"\u003e\u003c/a\u003e\nSee [#215](https://github.com/webcomponents/webcomponentsjs/issues/215) for background.\n\nIn 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.\n\nIt's worth noting that `customElement.__proto__.__proto__.constructor` is `HTMLElementPrototype` and that the prototype chain isn't modified by the polyfills(onto `ElementPrototype`, etc.)\n\n### Contenteditable elements do not trigger MutationObserver \u003ca id=\"contentedit\"\u003e\u003c/a\u003e\nUsing the MutationObserver polyfill, it isn't possible to monitor mutations of an element marked `contenteditable`.\nSee [the mailing list](https://groups.google.com/forum/#!msg/polymer-dev/LHdtRVXXVsA/v1sGoiTYWUkJ)\n\n### ShadyCSS: :host(.zot:not(.bar:nth-child(2))) doesn't work \u003ca id=\"nestedparens\"\u003e\u003c/a\u003e\nShadyCSS `:host()` rules can only have (at most) 1-level of nested parentheses in its argument selector under ShadyCSS. For example, `:host(.zot)` and `:host(.zot:not(.bar))` both work, but `:host(.zot:not(.bar:nth-child(2)))` does not.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgithub%2Fwebcomponentsjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgithub%2Fwebcomponentsjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgithub%2Fwebcomponentsjs/lists"}