{"id":14990076,"url":"https://github.com/webcomponents/polyfills","last_synced_at":"2025-05-12T07:49:28.874Z","repository":{"id":37502355,"uuid":"182089274","full_name":"webcomponents/polyfills","owner":"webcomponents","description":"Web Components Polyfills","archived":false,"fork":false,"pushed_at":"2025-04-09T13:27:59.000Z","size":33399,"stargazers_count":1161,"open_issues_count":134,"forks_count":169,"subscribers_count":32,"default_branch":"master","last_synced_at":"2025-05-11T05:49:13.692Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webcomponents.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-04-18T13:04:59.000Z","updated_at":"2025-04-27T23:33:24.000Z","dependencies_parsed_at":"2024-06-18T11:09:58.970Z","dependency_job_id":"1593c174-45e6-4643-8402-cfa854b6a51c","html_url":"https://github.com/webcomponents/polyfills","commit_stats":{"total_commits":3378,"total_committers":140,"mean_commits":24.12857142857143,"dds":0.7001184132622853,"last_synced_commit":"10f8e07aed8d0eff6daa8f9608bce3cf049d485e"},"previous_names":[],"tags_count":76,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webcomponents%2Fpolyfills","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webcomponents%2Fpolyfills/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webcomponents%2Fpolyfills/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webcomponents%2Fpolyfills/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webcomponents","download_url":"https://codeload.github.com/webcomponents/polyfills/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253523732,"owners_count":21921818,"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-24T14:19:25.462Z","updated_at":"2025-05-11T05:49:20.259Z","avatar_url":"https://github.com/webcomponents.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"# Web Components Polyfills\n\n[![Test Status](https://github.com/webcomponents/polyfills/workflows/tests/badge.svg?branch=master)](https://github.com/webcomponents/polyfills/actions?query=workflow%3Atests+branch%3Amaster+event%3Apush)\n\n##### [Getting Started](#getting-started) | [Usage](#usage) | [Packages](#packages) | [Roadmap](#roadmap)\n\nThe Web Components polyfills are a suite of JavaScript libraries that implement\n[Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) APIs\nfor browsers that don't have built-in support.\n\nIf you use Custom Elements, Shadow DOM, or the `\u003ctemplate\u003e` element, either\ndirectly or through a library like\n[LitElement](https://lit-element.polymer-project.org), then you can use these\npolyfills to make your app work in older browsers like IE11.\n\nWe're also working on polyfills for cutting edge new APIs for Web Components\nthat aren't built into all modern browsers yet, like Shadow Parts and Adopted\nStylesheets.\n\n## Getting Started\n\nInstall the `webcomponentsjs` package to get all of the Web Components\npolyfills and a _loader_ that automatically downloads only the polyfills each\nbrowser needs:\n\n```bash\nnpm install --save @webcomponents/webcomponentsjs\n```\n\nLoad the polyfills loader before any of your application code:\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003c!-- If your application is compiled to ES5, then load this script first. --\u003e\n    \u003cscript src=\"./node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js\"\u003e\u003c/script\u003e\n\n    \u003c!-- Add support for Web Components to older browsers. --\u003e\n    \u003cscript src=\"./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js\"\u003e\u003c/script\u003e\n\n    \u003c!-- Load your application code anytime after loader.js --\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003c!-- Your custom elements will work in older browsers like IE11. --\u003e\n    \u003cmy-custom-element\u003e\u003c/my-custom-element\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nFor more ways to load the Web Components polyfills, see the\n[webcomponentsjs](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs#how-to-use)\npackage.\n\n## Usage\n\nThe Web Components polyfills handle many usage patterns automatically, but\nthere are certain patterns that require direct interaction with the library:\n\n#### Setting Custom Properties\n\n- To set a CSS custom property value imperatively, pass the value to\n  [`styleSubtree`](https://github.com/webcomponents/polyfills/tree/master/packages/shadycss#imperative-values-for-custom-properties).\n\n- To re-compute CSS custom properties after a DOM mutuation that affects the\n  matching condition of a CSS rule containing a custom property (e.g. changing\n  a `class` attribute), call [`styleSubtree`](https://github.com/webcomponents/polyfills/tree/master/packages/shadycss#imperative-values-for-custom-properties).\n\n#### Registering styles\n\n- To use a style in the main document that sets or consumes a CSS Custom\n  Property, register it with\n  [`addCustomStyle`](https://github.com/webcomponents/polyfills/tree/master/packages/shadycss#about-customstyleinterface).\n\n- To use a style in a Custom Element, pass the element's template to\n  [`prepareTemplate`](https://github.com/webcomponents/polyfills/tree/master/packages/shadycss#usage)\n  before first cloning it. (Note that\n  [LitElement](https://lit-element.polymer-project.org) and the [Polymer\n  Library](https://polymer-library.polymer-project.org) perform this\n  registration step automatically.)\n\n## Packages\n\nThis repo is a _monorepo_. Each package lives under `packages/\u003cpackage\u003e`.\n\n### [![Published on npm](https://img.shields.io/npm/v/@webcomponents/webcomponentsjs.svg)](https://www.npmjs.com/package/@webcomponents/webcomponentsjs) [webcomponentsjs](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs)\n\n##### [Documentation](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs#readme) | [Changelog](https://github.com/webcomponents/polyfills/blob/master/packages/webcomponentsjs/CHANGELOG.md) | [Issues](https://github.com/webcomponents/polyfills/issues?q=is%3Aissue+is%3Aopen+label%3A%22Package%3A+webcomponentsjs%22)\n\nLoader and pre-minimized bundles for the full suite of Web Components\npolyfills.\n\nMost users only need to install this package, but it is also possible to\nseparately install any of the individual polyfills listed below.\n\n---\n\n### [![Published on npm](https://img.shields.io/npm/v/@webcomponents/custom-elements.svg)](https://www.npmjs.com/package/@webcomponents/custom-elements) [custom-elements](https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements)\n\n##### [Documentation](https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements#readme) | [Changelog](https://github.com/webcomponents/polyfills/blob/master/packages/custom-elements/CHANGELOG.md) | [Issues](https://github.com/webcomponents/polyfills/issues?q=is%3Aissue+is%3Aopen+label%3A%22Package%3A+custom-elements%22)\n\nPolyfill for Custom Elements ([MDN](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements), [Spec](https://html.spec.whatwg.org/multipage/custom-elements.html))\n\n---\n\n### [![Published on npm](https://img.shields.io/npm/v/@webcomponents/template.svg)](https://www.npmjs.com/package/@webcomponents/template) [template](https://github.com/webcomponents/polyfills/tree/master/packages/template)\n\n##### [Documentation](https://github.com/webcomponents/polyfills/tree/master/packages/template#readme) | [Changelog](https://github.com/webcomponents/polyfills/blob/master/packages/template/CHANGELOG.md) | [Issues](https://github.com/webcomponents/polyfills/issues?q=is%3Aissue+is%3Aopen+label%3A%22Package%3A+template%22)\n\nPolyfill for Template Element ([MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement), [Spec](https://html.spec.whatwg.org/multipage/scripting.html#the-template-element))\n\n---\n\n### [![Published on npm](https://img.shields.io/npm/v/@webcomponents/shadydom.svg)](https://www.npmjs.com/package/@webcomponents/shadydom) [shadydom](https://github.com/webcomponents/polyfills/tree/master/packages/shadydom)\n\n##### [Documentation](https://github.com/webcomponents/polyfills/tree/master/packages/shadydom#readme) | [Changelog](https://github.com/webcomponents/polyfills/blob/master/packages/shadydom/CHANGELOG.md) | [Issues](https://github.com/webcomponents/polyfills/issues?q=is%3Aissue+is%3Aopen+label%3A%22Package%3A+shadydom%22)\n\nPolyfill for Shadow DOM ([MDN](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM), [Spec](https://dom.spec.whatwg.org/#shadow-trees))\n\n---\n\n### [![Published on npm](https://img.shields.io/npm/v/@webcomponents/shadycss.svg)](https://www.npmjs.com/package/@webcomponents/shadycss) [shadycss](https://github.com/webcomponents/polyfills/tree/master/packages/shadycss)\n\n##### [Documentation](https://github.com/webcomponents/polyfills/tree/master/packages/shadycss#readme) | [Changelog](https://github.com/webcomponents/polyfills/blob/master/packages/shadycss/CHANGELOG.md) | [Issues](https://github.com/webcomponents/polyfills/issues?q=is%3Aissue+is%3Aopen+label%3A%22Package%3A+shadycss%22)\n\nPolyfill for Scoped CSS ([Spec](https://drafts.csswg.org/css-scoping))\n\n---\n\n### [![Published on npm](https://img.shields.io/npm/v/@webcomponents/html-imports.svg)](https://www.npmjs.com/package/@webcomponents/html-imports) [html-imports](https://github.com/webcomponents/polyfills/tree/master/packages/html-imports)\n\n##### [Documentation](https://github.com/webcomponents/polyfills/tree/master/packages/html-imports#readme) | [Changelog](https://github.com/webcomponents/polyfills/blob/master/packages/html-imports/CHANGELOG.md) | [Issues](https://github.com/webcomponents/polyfills/issues?q=is%3Aissue+is%3Aopen+label%3A%22Package%3A+html-imports%22)\n\nPolyfill for HTML Imports ([Spec](https://w3c.github.io/webcomponents/spec/imports/))\n\nNote that HTML Imports are\n[deprecated](https://groups.google.com/a/chromium.org/d/topic/blink-dev/h-JwMiPUnuU/discussion)\nin favor of [JavaScript\nmodules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules).\nAs of Chrome 81, HTML Imports are no longer natively supported by any browser.\nThe current version of the Web Components loader does **not** automatically\npolyfill HTML Imports. Applications that still depend on HTML Imports are\nrecommended to install `@webcomponents/html-imports` and load it separately.\n\n## Roadmap\n\nThe following APIs are on the roadmap for 2020:\n\n- **CSS Shadow Parts**\n  ([MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/::part),\n  [Spec](https://www.w3.org/TR/css-shadow-parts-1/)). Follow Issue [#252](https://github.com/webcomponents/polyfills/issues/252).\n\n- **Constructable \u0026 Adopted Stylesheets** ([Spec](https://wicg.github.io/construct-stylesheets/), [Explainer](https://github.com/WICG/construct-stylesheets/blob/gh-pages/explainer.md), [Article](https://developers.google.com/web/updates/2019/02/constructable-stylesheets)). Follow Issue [#44](https://github.com/webcomponents/polyfills/issues/44).\n\n- **FormData event** ([Spec](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#the-formdataevent-interface), [Explainer](https://docs.google.com/document/d/1JO8puctCSpW-ZYGU8lF-h4FWRIDQNDVexzHoOQ2iQmY/edit#heading=h.veshh4ug726u)). Follow Issue [#172](https://github.com/webcomponents/polyfills/issues/172).\n\n- **Form Associated Custom Elements** ([Spec](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example), [Explainer](https://docs.google.com/document/d/1JO8puctCSpW-ZYGU8lF-h4FWRIDQNDVexzHoOQ2iQmY/edit?pli=1#heading=h.2hgix04sc53t)). Follow Issue [#173](https://github.com/webcomponents/polyfills/issues/173).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebcomponents%2Fpolyfills","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebcomponents%2Fpolyfills","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebcomponents%2Fpolyfills/lists"}