Using Web Components
October 12, 2017
Web components are based on four main specifications:
The Custom Elements specification lays the foundation for designing and using new types of DOM elements.
The shadow DOM specification defines how to use encapsulated style and markup in web components.
The HTML imports specification defines the inclusion and reuse of HTML documents in other HTML documents.
The HTML template element specification defines how to declare fragments of markup that go unused at page load, but can be instantiated later on at runtime.
So far we have only used the custom elements portion of the web components spec. Not all browsers fully support the entire spec yet, but there are great polyfills that fill in the missing gaps and make web components usable today.
Accessibiltity is a big deal for us, and something we are always trying to improve upon. Some accessibility patterns can get complicated with aria-roles and making sure the markup is solid, so having a reusable component that would allow us to write the interactions once and reuse over and over would be really great for us. All the sites and applications that use that component will have proper markup. Also if we messed up and got the interaction wrong, we only need to fix it once too.
Polymer is project developed by Google in an effort to make creating components easier and more user friendly. It’s gone through lots of changes and is always getting better. We tried web components when Polymer was in version 1, and I personally thought it was clunky to use. I just couldn’t figure out how to solve the problems I was having so I abandoned it. At the time of this writing, Polymer 3.0 was recently announced and should make using the library even easier.
Many people have heard of the project and some think Polymer = Web Components. Not true. Polymer is a project that uses web components, and it’s one of several out there.
StencilJS is the new kid on the block, and so far the difference has been night and day for us. Stencil is also a project that uses web components, but its simply a group of helper functions to write W3 standard components more easily. The output of a stencil project is just a web component according to the W3 spec, you just didn’t have to write it by hand. Stencil is fast, and very easy to set up and get started if you use the boilerplate project. It’s still evolving and improving, but we were able to get up and running with a bunch of useful components in no time at all.
I have built several projects using React, and Stencil felt similar to me. Stencil was created by the group that made Ionic, which was a group of patterns designed to make writing Angular apps easier.
IW Pattern Library
We started a project to document our components and outline how to use them. It’s the IW Pattern Library hosted on Bitbucket.