Web Components

Sunday, 11 November 2018

When I first started learning HTML, I remember the delight I had after applying only a little markup, and seeing the results after reloading. Even as new techniques were developed to manipulate the page, elements being created and then falling out of usage, and other ways of representing tags emerging, the platform’s ability to organize a large amount of content in a friendly way remains a key feature. With Web Components now, designers and developers are given a unified way to create and consume new HTML.

Their viability on the evergreen Web increased when a unified way to share presented itself after industry favored ES6 modules over HTML imports (similar functionality is being rethought) and an NPM packaged frontend showed itself more appealing. Polymer moved in this direction also. Templates are now fairly ubiquitous, and the main API used to build modern Web Components has shipped to production.

So what is a modern Web Component?

They are made using “three main technologies, which can be used together to create versatile custom elements with encapsulated functionality that can be reused wherever you like without fear of code collisions.” – MDN web docs.

These three are listed as, Custom Elements, Shadow DOM, and HTML templates. When used by the consumer of the Web Component, the tag essentially has to be lowercase, contain a hyphen, can contain custom attributes, and cannot be self closing. For example:

<x-weather
  appid="NOT_A_REAL_API_KEY"
  host="api.openweathermap.org"
  location="San Fransisco, California"
>
  <x-current scale="F"></x-current>
  <x-forecast days="2" scale="F"></x-forecast>
</x-weather>

For my own experimentation I wanted a reproducible way to view on non-native browsers, so I put together a small project that can include the required polyfills and transpile back to ES5 for a starter site (or singular component). It isn’t intended for use in a production setting but I did end up building a small set of weather components with it. Other than that, I’ve been reading on best practices and learning more about Shadow DOM.

While I’m hopeful for better server side rendering support and will continue to watch how the future looks in regard to React, the thought of composing a site with a text editor, a few tags, and the F5 key sounds a bit refreshing. 🙂