Security News
PyPI Introduces Digital Attestations to Strengthen Python Package Security
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
@webcomponents/webcomponentsjs
Advanced tools
@webcomponents/webcomponentsjs is a polyfill library that enables the use of Web Components in browsers that do not natively support them. It provides polyfills for Custom Elements, Shadow DOM, HTML Imports, and Template, allowing developers to use these modern web standards across all browsers.
Custom Elements
This feature allows you to define custom HTML elements. The code sample demonstrates creating a custom element called 'my-element' with a shadow DOM containing a paragraph.
class MyElement extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = '<p>Hello, World!</p>';
}
}
customElements.define('my-element', MyElement);
Shadow DOM
This feature allows you to encapsulate styles and markup within a custom element. The code sample demonstrates creating a custom element with a shadow DOM that styles a paragraph.
class MyShadowElement extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = '<style>p { color: red; }</style><p>Shadow DOM Content</p>';
}
}
customElements.define('my-shadow-element', MyShadowElement);
HTML Imports
This feature allows you to include HTML documents in other HTML documents. The code sample demonstrates importing an HTML file that contains a custom element.
import './my-component.html';
// Assuming my-component.html contains:
// <link rel="import" href="./my-element.html">
// <my-element></my-element>
HTML Template
This feature allows you to define HTML templates that can be reused. The code sample demonstrates creating a template with styles and content, and then appending it to the document body.
const template = document.createElement('template');
template.innerHTML = '<style>p { color: blue; }</style><p>Template Content</p>';
document.body.appendChild(template.content.cloneNode(true));
Lit is a library for building fast, lightweight web components. It offers a more modern and efficient approach compared to @webcomponents/webcomponentsjs, with features like reactive properties and declarative templates.
Stencil is a compiler that generates Web Components and builds high-performance web apps. It provides a more comprehensive solution with TypeScript support, JSX, and a focus on performance and developer experience.
Hybrids is a UI library for creating Web Components with simple and functional API. It emphasizes simplicity and functional programming principles, offering a different approach compared to the polyfill-focused @webcomponents/webcomponentsjs.
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:
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)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.
webcomponents-loader.js
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 -->
<my-element></my-element>
<!-- Interact with the upgraded element -->
<script>
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); // 👍
element.someAPI(); // 👍
});
</script>
custom-elements-es5-adapter.js
According 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
.
To work around this, load custom-elements-es5-adapter.js
before declaring new Custom Elements.
The adapter must NOT be compiled.
<!-- Load Custom Elements es5 adapter -->
<script src="bower_components/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<!-- Load polyfills; note that "loader" will load these async -->
<script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<!-- Load the es5 compiled custom element definition -->
<link rel="import" href="my-es5-element.html">
<!-- Use the custom element -->
<my-es5-element></my-es5-element>
The polyfills are intended to work in the latest versions of evergreen browsers. See below for our complete browser support matrix:
Polyfill | IE11+ | Chrome* | Firefox* | Safari 9+* | Chrome Android* | Mobile Safari* |
---|---|---|---|---|---|---|
Custom Elements | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
HTML Imports | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
Shady CSS/DOM | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
*Indicates the current version of the browser
The polyfills may work in older browsers, however require additional polyfills (such as classList, or other platform polyfills) to be used. We cannot guarantee support for browsers outside of our compatibility matrix.
If you wish to build the bundles yourself, you'll need node
and npm
on your system:
npm
to install gulp.js: npm install -g gulp
Now you are ready to build the polyfills with:
# install dependencies
npm install
bower install
# build
gulp build
The builds will be placed into the root directory.
See the contributing guide
Everything in this repository is BSD style license unless otherwise specified.
Copyright (c) 2015 The Polymer Authors. All rights reserved.
WebComponentsReady
Under native HTML Imports, <script>
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.
The 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
.
For 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.
window.addEventListener('WebComponentsReady', function(e) {
// imports are loaded and elements have been registered
console.log('Components are ready');
});
See #215 for background.
In 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.
It's worth noting that customElement.__proto__.__proto__.constructor
is HTMLElementPrototype
and that the prototype chain isn't modified by the polyfills(onto ElementPrototype
, etc.)
Using the MutationObserver polyfill, it isn't possible to monitor mutations of an element marked contenteditable
.
See the mailing list
ShadyCSS :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.
FAQs
Web Components Polyfills
The npm package @webcomponents/webcomponentsjs receives a total of 128,349 weekly downloads. As such, @webcomponents/webcomponentsjs popularity was classified as popular.
We found that @webcomponents/webcomponentsjs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.