Web Components. It’s about time.

Web components provide a way for developers to create custom, reusable, encapsulated HTML elements. They were first proposed all the way back in 2011. Since then, they’ve kicked around without really getting much traction. Until recently. With the rise of components in frameworks, a web component standard has suddenly started looking a lot more appealing. The newest version of Angular allows you compile your Angular components to web components, and both React and Vue components are perfectly happy interoperating with web components. It turns out though, that web components are actually kind of complicated. They rely on four different standards – custom elements, Shadow DOM, HTML imports and HTML templates. And support for each of these standards varies across browsers. So, let’s have a look at what each of these standards do, how they work together, and what you need to do to get them working in each of the main browsers. We’ll also have a look at how you can use web components in your framework of choice, and why you might want to do that.