⏰🦉 Early Bird Sale! Today through Monday, get 30% off registration in the next session of the Vanilla JS Academy.
Over the weekend, I gave a series of short remote talks at the State of the Browser conference. Today, I wanted to share a recording of the first one: how to create your first Web Component in five minutes or less.
Here's the text transcript if you'd prefer to read…
Hi, I'm Chris Ferdinandi, the VanillaJS Guy.
I teach people how to build a simpler, more resilient web over at gomakethings.com.
And today, I'm going to share a series of short talks about cool, browser-native features with you.
First up, Web Components.
Web Components are a collection of technologies that you can use to create reusable custom elements, with built-in interactivity automatically scoped or encapsulated from the rest of your code.
They have a wide range of features and functionality, some good, some bad, and some ugly.
But today, we're going to look at how to create your first web component using the most cliche of examples, the counter button.
And yes, I did click that button 42 times instead of just hard coding in the number.
To get started, we'll create a custom element.
You can name it anything you want, but it must include at least one dash.
word web components are not allowed, because those are reserved for native elements.
In this case, we're going to call ours counter-button.
Next, we need to register it with JavaScript, and we can do that with the customElements.
define method.
With this method, we pass in the name of our custom element as the first argument, and a class that extends the HTML element object as our second.
When our page loads, this will automatically find any custom elements with the name that we provided and instantiate a new instance of our class on them.
Now that we have our custom elements and we've defined them, we're going to actually render some HTML into the UI for them.
And to do that, we need to use the constructor function inside our class.
The constructor function runs when a new instance of the class is created.
In it, we'll run the super method to make sure that we have access to the parent class, which in this case is the HTML element object, and all of its properties.
Next, we'll add a property to track the number of clicks.
In this case, we're going to call it count.
We're going to attach it to this, the current element being instantiated by this class, and we're going to give it a default value of zero.
You can think of this like component state in your favorite JavaScript library or framework.
And finally, we'll use the innerHTML property to render a button into the custom element, which is the item assigned to the this keyword, and we'll include our countState property as part of that text.
Now a button is automatically rendered into the UI whenever we include our custom element.
If we jump over to the browser, you can actually see I have three buttons.
one says clicked 0 times as its default value.
When the button is clicked, we want to increase our count by 1 and update the UI.
Web Components have a handful of lifecycle functions that run when various things happen, just like a lot of state-based UI frameworks do.
One of those, the connected callback function, runs when the custom element is loaded into the DOM.
We'll use that to add a click event listener on our custom element.
In this case, we need to save this to a variable because we need to be able to access it inside our callback function.
Inside that callback function, we are going to increase our count state by one, and then we're going to use the text content property to update the text inside our button to display the new count value.
Now whenever a button is clicked, the count and the UI are automatically updated.
If we jump over to the browser and I click, you'll notice each button maintains its own state and clicking or toggling one button doesn't affect the others, but the UI automatically updates.
And with that, you've just created your first web component.
You can access the source code from this talk and dig deeper into web components over at gomakethings.com/sotb.
And I'll be back later with another Speedy Dev Insight.
Cheers,
Chris
Want to share this with others or read it later? View it in a browser.