Last week, we looked at different ways to setup the HTML in a Web Component.
One of the challenges with running your code in the constructor() is that sometimes the custom element is created, but none of the nested HTML inside it is ready yet.
We looked at a few different ways to fix that, but today, I wanted to share two more.
Let's dig in!
🚀 I'm launching a Web Component course! Learn how to create your Web Components from scratch, master best practices, learn when to use them, and more. Pre-order today and get $100 off.
Using requestAnimationFrame() or setTimeout()
One option to work around this is to try to setup your Web Component, and if any required HTML is missing, using requestAnimationFrame() or setTimeout() to try again after the next browser paint.
For example, imagine that you have a setup() method in your Web Component class that setups the DOM and adds all of the interactivity.
/** * Setup the Web Component when it's connected to the DOM */ setup () { // Set the properties this.button = this.querySelector('button'); this.count = parseFloat(this.getAttribute('start')) || 0; this.step = parseFloat(this.getAttribute('step')) || 1; this.text = this.getAttribute('text') || 'Clicked Times'; // Listen for click events this.button.addEventListener('click', this); // Announce UI updates this.button.setAttribute('aria-live', 'polite'); }
After setting this.button, you can check if the property exists.
If not, you can use requestAnimationFrame() to run this.setup() again during the next browser paint, and bail on the rest of the setup until then.
/** * Setup the Web Component when it's connected to the DOM */ setup () { // Get the button this.button = this.querySelector('button'); // If it doesn't exist, try again after the next paint if (!this.button) { requestAnimationFrame(() => { this.setup(); }); return; } // Set the remaining properties // ... }
Here's a demo.
Use a [ready] attribute
Last week, we learned that Web Components can automatically detect when attributes are added, removed, or changed.
We can use that built-in functionality to detect when a [ready] attribute is added to our component, and run the setup when it happens.
// Define the attributes to observe static observedAttributes = ['ready']; /** * Setup the component when the [ready] attribute is added */ attributeChangedCallback () { this.setup(); }
Here's another demo.
Which approach should you use?
If I were building Web Components for a design system that might be used by different developers in different ways, I'd likely combine a few of these approaches to give my devs lots of options…
- Automatic instantiation when the element is created
- A
this.setup() method that can be manually run - Using
requestAnimationFrame() to retry a few times (I'd maybe stop after a few failed attempts) - A
[ready] attribute
Which approach do you like best?
Like this? You can support my work by purchasing an annual membership.
Cheers,
Chris
Want to share this with others or read it later? View it in a browser.
0 Komentar untuk "[Go Make Things] More ways to instantiate Web Components"