The State of Web Components

Has the time come to embrace native components?

Has the modern Web Platform evolved to the point where we can start using native components? As developers, we know that reusing code is a good idea. Does this mean we should use Web Components everywhere, or is this taking it a step too far?

These are some of the questions I try to answer in this article. However, for those who are wondering what I am talking about, let’s start from the beginning.

Why Web Standards?

Before there were any rules, the browser manufacturers kept introducing new features to better their competition. Browsers were diversified, and developers often had to make multiple versions of websites.

Web standards were finally introduced to protect the web ecosystem. Browser makers started working in a more standardized way unifying the browser stack.

The key groups for web standards are:

The World Wide Web Consortium (W3C)

The Web Hypertext Application Technology Working Group (WHATWG).

These are the community of people producing the standards that build up the web platform.

Web Components

In 2010–2011, people at Google started crafting the first drafts of what we now know as Web Components. The specifications are a set of web platform APIs that let you extend the browser’s built-in HTML tags. Components built on the Web Component standards work across modern browsers and with any JavaScript library or framework that works with HTML.

Web Components are framework agnostic components based on web standards.

These are the main specifications in the umbrella term that is Web Components: ☔️

Custom Elements let developers create their HTML Elements.

Shadow DOM lets us encapsulate style and markup in web components.

ES Modules is the ECMAScript standard for working with modules.

HTML Template defines how to declare fragments of markup that go unused at page load, but can be instantiated later on at runtime.

Sometimes people use Web components and Custom elements interchangeably.

HTML imports were part of the spec before ES6 modules replaced them. There are now new proposals on HTML Modules and CSS Modules.

How do they work?

Here’s a simplified example of how to create a Web component:

class MagicButton extends HTMLElement {

// Magic goes here

} customElements.define('magic-button', MagicButton);

The class for our custom element is a regular JavaScript class which extends the native HTMLElement . When we call customeElements.define(...) we register the custom element in the CustomElementRegistry. Then we can use it with regular HTML:

<magic-button></magic-button>

Note that according to the specifications, your element needs to have at least one dash in its name to avoid conflicts with existing elements.

Why use Web Components?

Why should we write Web Components instead of writing components in our favorite framework? I mean these web standards move slowly while the frameworks move so fast we don’t even remember their version numbers anymore. ⚡️

What problem does providing a native component model solve?

They let you write encapsulated and reusable components. With Web Components, we gain interoperability. By having a standard interface and expressed as real HTML, they work with all the popular frameworks. Web components implemented using different libraries can even mix on the same page. We create them once and can then use them almost anywhere.

There are some excellent use cases for Web Components. For example, it’s popular with companies to unify the look and feel for their sites by writing their own Design Systems. By leveraging Web Components, they can share UI components across frameworks.

Another reason could be when a company or team decides to change tech stacks, because of Hype Driven Development or some important reason. If the library components are Web Components, then we don’t have to rewrite them.

Even people that are not familiar with programming but are familiar with HTML should be able to drop in a Web component on their page. The ease of use makes them perfect for enhancing content sites. Since it’s standard HTML, a maintainer of a Content Management System (CMS) can add it themselves.

So, we have some reasons to use Web Components, but can we use them in the browsers today?