Ad/iklan :







Search.Pencarian Menu

Add text send email to rh3252705.adda@blogger.com or Click this (Text porn Will delete) | Tambah teks kirim email ke rh3252705.adda@blogger.com atau Klik ini (Teks porno akan dihapus)
Total post.pos : 13631+

[Go Make Things] More ways to instantiate Web Components

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.

Share :

Facebook Twitter Google+
0 Komentar untuk "[Go Make Things] More ways to instantiate Web Components"

Back To Top