We are using Web Components and Polymer on our site, and have quite a few bits of Javascript which wait for the "WebComponentsReady"
event to be fired before executing. However, we have some asynchronous JS files which occasionally add an event listener for the event after it has been fired, meaning the script we want to run is never run.
Does anyone know if there is a flag for Web Components being ready which can be checked?
Something like this is what we would need:
if(WebComponents.ready) { // Does this flag, or something similar, exist??
// do stuff
} else {
document.addEventListener('WebComponentsReady', function() {
// do stuff
}
}
Any help appreciated.
We can avoid them using libraries like Lit, Stencil, or Catalyst. The realization that all modern frontend frameworks and many big companies count on Web Components clearly shows that Web Components are not dead.
Web Components consist of three separate technologies that are used together: Custom Elements. Quite simply, these are fully-valid HTML elements with custom templates, behaviors and tag names (e.g. <one-dialog> ) made with a set of JavaScript APIs. Custom Elements are defined in the HTML Living Standard specification.
I think the answer is "yes" - Web Components will replace UI frameworks like React.
In 2018 Google released Polymer version 3.0, but at the same time they announced that all Polymer elements were put into “maintenance mode” (critical bug fixes only). Instead of working on improvements for Polymer, they created a new library called lit-html.
The following flag is set during bootstrap
window.CustomElements.ready
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With