Web Components API in a Nutshell
The what and why for the native Web Components API
We all know that re-using code as much as possible is generally a good idea. Sharing code between components saves us money, energy, and, most importantly, time.
Re-using code hasn’t been so easy for the complex HTML. You’ve sometimes had to write to render custom UI controls, and using them multiple times can turn your page into a mess if you are not careful.
Here’s where Web Components come in. Web Components is a suite of different technologies which allow you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and to utilize them in your web apps.
For example, web components let us define custom elements in
Each JS framework has its own API for reusable components. A
react-video-player won’t work in Ember, and a
All we need is the
index.html and the
app.js file. Make sure to include the
app.js file in your
Notice how the browser global window object has a property called
customElements — we call the define method on the property to create our custom HTML element. It takes three arguments, the last one is optional.
The first argument is the name of the custom element,
app-button in the example above. The second argument is the constructor for the element. We use the constructor to build up our custom element, like attaching event listeners and logic.
Notice how our
WebComponentButton class extends the
HTMLElement class. To put it simply, we inherit from and extend the built-in HTML elements.
If we open the
index.html file in our browsers, here’s what we should see:
Notice how there’s a JSX like node element in our DOM? Pretty cool, considering we’re not using any bundlers or frameworks here.
As expected, if we click on the button, nothing happens. We need to tell the button what to do after clicking on it. In order to accomplish this, let’s add an event listener for our button.
Now, if we click on the button, we should see a
click logged to the console.
Let’s add the styles to the button. How would we do that?
WebComponentButton class has lifecycles out of the box. If you come from the React, Vue, Angular, etc., this might be familiar to you already. Lifecycle methods let us control what happens when certain actions happen. For example, when the browser renders the button, we want to attach styles to it.
We can style our button via the standard
CSSStyleDeclaration API. For example,
<div style=”…”> uses the
This references our class,
WebComponentButton in this case. The above code will give our button a dark border with padding.
Most modern browsers have decent web components support. Considering IE11 irrelevant, you should be good to go to use web components in production.
Where to Go From Here
The Web Component API can do a lot for you. Please read the below pieces to gain better insight into it’s usefulness.
As developers, we all know that reusing code as much as possible is a good idea. This has traditionally not been so…
Custom Elements v1: Reusable Web Components | Web Fundamentals | Google Developers
Custom elements allow web developers to define new HTML tags, extend existing ones, and create reusable web components.
An Introduction to Web Components | CSS-Tricks
Front-end development moves at a break-neck pace. This is made evident by the myriad articles, tutorials, and Twitter…
In case you want to play with the source code, feel free to grab the example here.
Contribute to indreklasn/js-web-components-nutshell development by creating an account on GitHub.
Thanks for reading. Stay hungry for information! ❤