Carl Rippon

Building SPAs

Carl Rippon
BlogBooks / CoursesAbout
This site uses cookies. Click here to find out more

Are Web Components Finally a Thing?

July 24, 2018
javascript

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.

web components

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:

HTML template browser compatibility

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?

Custom element browser compatibility

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?

Shadow DOM browser compatibility

Nope!

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

HTML import browser compatibility

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:

shadow DOM firefox flag

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

shadow DOM firefox flag

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.

Edge Shadow DOM

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

Edge Shadow DOM

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.

Web component libraries

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.

Did you find this post useful?

Let me know by sharing it on Twitter.
Click here to share this post on Twitter