A decade in the making, Web Components, a standardized set of technologies allowing us to allowing to create reusable custom elements are now widely supported in modern browsers.
In this presentation Ana Cidre will take a look at the overall architecture and some common use cases and patterns to get you started now Web Components are a viable option.
The State of Web Components
Ana Cidre, Developer Advocate Auth0
Ana is talking about the past, present and future of web components.
So what are web components? They are platform-agnostic components – they run equally well on all platforms.
Their main goal is to encapsulate the code so it’s reusable and things like styles don’t ‘leak’.
The term “web components” is often used interchangeably with “custom elements”, but it’s not really true. Web components is an umbrella term for four technologies.
The first is HTML template
<template></template> – which has been around for a long time. But this is where you put the template of your web component. It is only parsed once, no matter how many times you clone it.
(demo with an image component)
The second tech is Custom Elements, letting us create new HTML tags or extend existing tags. You must always name them with a
- to indicate they’re a component; and for the sake of your future self, name them in an understandable way.
You declare a
class to extend HTMLElement, then link that class to your component with
customElements.define. This gives access to some special methods known as custom element reactions.
Remember if you build a completely custom component for something like a button, will not behave like a normal button unless the author recreates all the usual functionality of a button.
So now you have a custom element you can style it as you normally would. The example uses CSS custom properties, which is just normal CSS.
This is a really nice alternative to the all-too-common Div Soup.
The third tech is Shadow DOM, which provides DOM encapsulation – this isolates your component so you have total control over its style, without clashes with other code. You initialise this using
attachShadow, choose the mode, and attach it to the DOM.
The fourth tech is ES Modules, which enable web components to be developed in a modular way. Most JS development uses ES Modules these days and web components are no exception. You declare an interface for your component in a .js file, which you can then load with a
script type="module" using either
So how do these all work together? Let’s create one! This example is creating a login button.
First we need to create our template. This provies HTML and CSS in a style element.
Then we create our custom element
class, add a
super, attach the Template and Shadow DOM.
Then we have our
get observedAttributes which are the component attributes. You can then manipulate these attributes with
attributeChangedCallback – one of the custom element reactions. Another is
connectedCallback, which is called when the component is added to the DOM. You can then set default values and prepare your component for real world use.
You can get the code from Stackblitz (click the logo in the slide).
So web components are completely awesome, right?!
Note you can reach out to Ana about this tutorial, or to ask about Auth0 where she’s a developer advocate (https://twitter.com/@AnaCidre_).
Ana is also the founder and organiser of NGSpain, Gals Tech (for women getting started in tech in the Galicia region in Spain), and she’s a Women Techmakers Ambassador.
When Ana talks about web components on a more personal level, not as a developer advocate, she tends to get a common reaction that people just don’t want to know.
Mike Hartington frames it as a classic XYZ joke – “I have a web components joke, but you’ll probably hate it for no reason”.
So why is this? Let’s go back to when web components started – browser support was terrible and the polyfills were huge (by the standards of the time).
So a lot of people tried it, didn’t like it, don’t wanna try it again.
But many years have passed and browsers have adopted web components – not just one or two, but all the current browsers.
But why swap your framework of choice for web components?
Interoperability: you can share components across teams and the different frameworks they’ve chosen – say Angular, Vue and React. Instead of making a new implementation for each team, you can do it once in web components and share it across all of them.
https://custom-elements-everywhere.com/ has lots of information on using custom elements in a range of frameworks.
You also get big performance gains. Because web components are native to the browser, you don’t have to load heavy frameworks – yes, it’s even lighter than Svelte.
You get encapsulation – there is no leakage in or out of your component. This is a hot topic for styling.
You can use CSS custom properties to provide a styling interface for your component and give controlled flexibility. It’s ok, but it’s fairly verbose.
There is another way: CSS Shadow Parts (
::part()). This lets you allow styling of specific parts of your component, while protecting others. Then people can write fairly normal-looking CSS to provide their custom extensions.
Slots act as a placeholder to add content in defined locations in your components. For example a description for your login component. You name the slot and authors can pass content to that named slot.
Browser compatibility – it’s really important to look at all the green ticks. Two years ago this was not all green. Everything except IE11 works, but the good news is that polyfills are good now too. So there really is no need to worry.
While Ana has created web components in absolutely pure native code, there are frameworks and libraries to help you do it.
LitElement, Hybrids, Stencil, Polymer, Skate.js, Slim.js, Angular Elements and Vue.js just to name a few.
Lit-HTML and LitElement are the future of Polymer. The example shown earlier uses far fewer lines of code when using them. It also adds a lot of popular features you’d be used to using in common UI frameworks (but without a build step).
There are also some pre-made element libraries, like Wired Elements and Ionic.
It’s worth noting lots of big companies are adopting web components; and they’re not just using them for pure UI elements. They are using them for other features as well.
Examples: 3D model viewer, medical imaging, CSS Doodle, colour picker and so on.
So we’ve seen the past and present, what is the future for web components?
The first is the Custom State Psudeo Class
:state() – this lets components expose their state in a similar way to built in elements.
Lastly the Form Participation API will allowing devs to provide custom form elements without heavy elements that are just reproducing what browsers already do.
It’s a great time to check out web components. Because they are native to the browser you no longer have to worry about big frameworks… they are just brilliant!