WebComponentsReady is an event-like readiness signal for Web Components on a page. It indicates that polyfills and component definitions can be applied to matching elements, making it useful when setup timing matters. section 14.2
Despite its browser-style usage, WebComponentsReady is generated by the Web Components polyfill rather than by the browser itself. Natively supported Web Components do not require this polyfill-specific signal. section 14.2
Listen for page-wide readiness
Load the polyfill, then register a listener: document.addEventListener('WebComponentsReady', function () { console.log('components ready'); }); This callback runs after the polyfill has made Web Component definitions ready for page elements. section 14.2
Wait for one component instead
For a specific custom element, use customElements.whenDefined('sample-component').then(() => { console.log('defined now!'); }); This targets one definition rather than waiting for Web Components across the page. section 14.2
Listing 14.1. WebComponentsReady event
<html>
<head>
<title>Web Components Ready</title>
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.0.0/ #1
webcomponents-loader.js"></script>
<script>
document.addEventListener( #2
'WebComponentsReady', function(e) {
console.log('components ready');
});
</script>
</head>
</html>
The listing shows the polyfill script and the minimal event listener needed to observe WebComponentsReady. section 14.2
