Web Components are a set of standards based web platform APIs that allow us to create reusable components in our web apps. They were first introduced way back in 2011 and google lead the way with their implementation in chrome.

The other browser vendors have been slow to adopt web components though. The shadow DOM and custom element specifications have been revised along the way. Browser vendors have disagreed about HTML imports.

In the meantime popular frontend libraries and frameworks like reactjs, vuejs and angular have created their own way of creating reusable components.

So, are standards based web components viable now? Will they ever be? …

The need for standards based web components

Being able to reuse components across our different projects, helps speed up delivery. If we can dictate the framework / library that all our projects use then something like reactjs is a great choice. However, what if we can’t control the framework … e.g. we might work for a software company that is very acquisitive so different frameworks and libraries might already be in play. Even if we can dictate the framework / library that our projects use, we might what to use a hot new framework but still be able to reuse components from previous projects.

Standards based web components allow us to create reusable components that can be used with any framework and library. I think this is really compelling.

Browser adoption

There are 4 sets of APIs that browser vendors need to adopt …

HTML templates allow us to define templates for things like table rows or list items. Browser adoption is good:

Custom elements allow us to define html tags that encapsulate functionality. It’s a fundamental part of creating a reusable component. So, what’s browser adoption like today?

That doesn’t seem great!

What about the shadow DOM? This allows us to protect the markup structure, style, and behaviour of the component from other code on the page so that different parts do not clash. This is another key part of creating a reusable component. Will browser adoption be better for this?

Nope!

Things get even work when we look at HTML imports. These are intended to be the packaging mechanism for web components.

So, still not viable right? It feels like we need to wait a little longer …

Looking more closely at Firefox

First let’s look at the green flag on shadow DOM firefox support:

Firefox has shadow DOM support behind a flag. In fact if we try to render a standard web component in Firefox nightly, it works!

Notice the #shadow-root bit in the DOM tree being dealt with correctly in the x-modal custom element.

This is encouraging!

Looking more closely at Edge

If we look at the shadow DOM on the Microsoft developer site, the message and number of votes are encouraging.

If we look at custom elements, the message isn’t quite so strong.

So, it’s going to be a while before we get edge support. Obviously we won’t ever get IE support.

Polyfills

Luckily there are polyfills. So we can use web components today with Firefox, Edge and even IE.

Web component libraries

Developing web components using the standard APIs is pretty low level these days compared with how you develop a web component in something like reactjs. So, not surprisingly there are a bunch of great libraries that help us develop standards based web components more efficiently.

Polymer is library from google and has probably been around the longest.

Personally, I really like stencil - I’ll probably blog about this in the near future.

It’s also exciting to see Angular now having the ability to emit standard web components with angular elements

So, are web components viable yet?

I believe so! They work in all the major browsers today with polyfills. It also feels like there is real momentum building with lots of libraries being built to help us build web components more productively.

Comments

Peter Campbell July 26, 2018

I was working a project the other day, where web components would have been useful. Yes you can use a JavaScript framework like Angular/react but it adds another level of complexity, when all you want is to template your html, and create reusable modules. I will take a look at those poly fills and see what is suitable, thank you

Peter December 18, 2018

Great read. Thanks for writing this up and doing the legwork that came with it.