Web Components Polyfills
If you use Custom Elements, Shadow DOM, or theelement, either directly or through a library like LitElement, then you can use these polyfills to make your app work in older browsers like IE11.
We're also working on polyfills for cutting edge new APIs for Web Components that aren't built into all modern browsers yet, like Shadow Parts and Adopted Stylesheets.
webcomponentsjspackage to get all of the Web Components polyfills and a loader that automatically downloads only the polyfills each browser needs:
npm install --save @webcomponents/webcomponentsjs
Load the polyfills loader before any of your application code:
<!-- If your application is compiled to ES5, then load this script first. --> <script src="./node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script> <!-- Add support for Web Components to older browsers. --> <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script> <!-- Load your application code anytime after loader.js --> <!-- Your custom elements will work in older browsers like IE11. --> <my-custom-element></my-custom-element>
For more ways to load the Web Components polyfills, see the webcomponentsjs package.
The Web Components polyfills handle many usage patterns automatically, but there are certain patterns that require direct interaction with the library:
To re-compute CSS custom properties after a DOM mutuation that affects the matching condition of a CSS rule containing a custom property (e.g. changing a
This repo is a monorepo. Each package lives under
Loader and pre-minimized bundles for the full suite of Web Components polyfills.
Most users only need to install this package, but it is also possible to separately install any of the individual polyfills listed below.
Polyfill for Scoped CSS (Spec)
Polyfill for HTML Imports (Spec)
@webcomponents/html-importsand load it separately.
The following APIs are on the roadmap for 2020: