webcomponents.js (v1 spec polyfills)

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

> Note. For polyfills that include HTML Imports,
> see the v1 branch.

A suite of polyfills supporting the Web Components specs:

- Custom Elements v1: allows authors to define their own custom tags (spec, tutorial, polyfill).
- Shadow DOM v1: provides encapsulation by hiding DOM subtrees under shadow roots (spec, tutorial,
shadydom polyfill, shadycss polyfill).

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

- HTMLTemplateElement
- Promise
- Event, CustomEvent, MouseEvent constructors and Object.assign, Array.from
(see webcomponents-platform)
- URL constructor

How to use

$3

``bash
npm install @webcomponents/webcomponentsjs
`

You can also load the code from a CDN such as unpkg: https://unpkg.com/@webcomponents/webcomponentsjs@^2/

$3

The webcomponents-bundle.js contains all of the web components polyfills and is
suitable for use on any supported browser. All of the polyfill code will be loaded
but each polyfill will only be used based on feature detection.
The bundle includes 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).

The webcomponents-bundle.js is very simple to use but it does load code
that is not needed on most modern browsers, slowing page load. For best performance,
use the webcomponents-loader.js.

Here's an example:

`html





`

$3

The webcomponents-loader.js is a client-side loader that dynamically loads the
minimum polyfill bundle, using feature detection.

webcomponents-loader.js can be loaded synchronously, or asynchronously depending on your needs.

#### Inlining

If you have inlined the source of webcomponent-loader.js, then you should specify window.WebComponents.root as the root from which to load the polyfills.
For example:

`html

`

This property is used to build the URL to the selected bundle, so you should
only set it to values that are unable to be influenced by user-controlled data.
If trusted types are enforced, this property should be a TrustedScriptURL.

#### Synchronous

When loaded synchronously, webcomponents-loader.js behaves similarly to webcomponents-bundle.js.

The appropriate bundle will be loaded with document.write() to ensure that WebComponent polyfills are available for subsequent scripts and modules.

Here's an example:

`html





`

#### Asynchronous

When loaded asychronously with the defer attribute, polyfill bundles will be loaded asynchronously,
which means that scripts and modules that depend on webcomponents APIs _must_ be loaded
using WebComponents.waitFor function.

The WebComponents.waitFor function takes a callback function as an argument, and will evaluate that callback after the polyfill bundle has been loaded.

The callback function should load scripts that need the polyfills (typically via import('my-script.js')) and
should return a promise that resolves when all scripts have loaded.

Here's an example:

`html

src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"
defer
>



`

The WebComponents.waitFor function may be called multiple times, and the callback functions will be processed in order.

Here's a more complicated example:

`html

src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"
defer
>


`

#### Trusted Types

If you're using the loader on a page that enforces the trusted-types Content
Security Policy, you'll need to allow the webcomponents-loader policy name so
that the loader can dynamically create and insert a