Web Components by Example: Part 1

Published in

codeburst

3 min readOct 1, 2017

We start learning web components by first learning how to use them.

While I have been using front-end frameworks like Angular JS and more recently React, every so often I hear something about how web components are going to revolutionize web development. While they have not yet done so, (as illuminated by the article The Broken Promise of Web Components), I thought it important to understand what they are.

This series documents my learning through example.

Usage

Let us begin by simply using an existing web component; say the emoji-rain web component. While you can follow along and build your own implementation, the completed example is available.

In a new folder run the following command to install emoji-rain.

bower install emoji-rain

note: Bower is an outdated (as stated by the Bower team themselves) web package manager that is replace by npm (included with Node.js) or Yarn. We reverted to using Bower as the classic emoji-rain web component example was only available with it.

Create a HTML file that uses this component.

./usage/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Webcomponents</title>
    <link rel="import" href="bower_components/emoji-rain/emoji-rain.html">
  </head>
  <body>
    <emoji-rain active></emoji-rain>
  </body>
</html>

Open index.html in an updated Chrome browser; the screen should be raining emojis; we will work-in cross-browser support later.

note: You will need to use a web server to use the examples; trying to open the files directly will generate an error. One easy solution is to use http-server.

Looking at the Elements tab in Chrome Developer Tools, we can see some of what is going on under the hood with the injected style and canvas elements for emoji-rain.

Looking at the Sources tab in Chrome Developer Tools reveals its JavaScript functionality and that it is built upon the Polymer Project.

CORS

The error that you may have observed when trying to load the previous example by simply opening the file index.html reports something about CORS. The issue is:

HTML Imports basically can’t import resources from other origins. For example, you can’t import an HTML file at http://example.com/ from http://webcomponents.org/.
To avoid this restriction, use CORS (Cross Origin Resource Sharing). To learn about CORS, read this article.

— web components team

While this will not be an issue in our examples, you would have implement CORS if you were loading web components across origins.

webcomponents.js

If you followed the installation and usage instructions provided on the emoji-rain page, you would have added an extra line to your HTML file. The completed example is available.

./webcomponentsjs/index.html

...
<title>Hello Webcomponents</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/emoji-rain/emoji-rain.html">
...

The small webcomponents-lite.js (70K, 40K minified) file provides a polyfill that enables web components to run across most browsers (including Internet Explorer 11+ and Safari 9+).

webcomponents-loader.js

In order to further reduce the polyfill’s footprint, we can use webcomponents-loader.js instead. The completed example is available.

We first install the newest version of webcomponentsjs (the version automatically downloded with emoji-rain is older)…

bower install webcomponentsjs --save

and then use it.

./webcomponentsjs-loader/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Webcomponents</title>
    <script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
    <link rel="import" href="bower_components/emoji-rain/emoji-rain.html">
  </head>
  <body>
    <emoji-rain active></emoji-rain>
  </body>
</html>

Running this in Chrome results in only an additional 3.4K overhead (because it already supports web components).

Next Steps

Web components are based on four main specifications:

The Custom Elements specification
The shadow DOM specification
The HTML imports specification
The HTML Template specification

Continuing with Web Components by Example: Part 2, we will to explore them and build our own components.

Web Components by Example: Part 1

Written by John Tucker