Web Component technology is, well, it's delicious bits of Web Candy. Crunchy and hard on the outside, soft and chewy on the inside, delightful throughout.

Of course, with any technology, you have to ask: Why?

Short Answer: Encapsulation

Encapsulation basically means bundling together all the stuff you need to get something done, and hiding the details, so you can just use the thing. We've had encapsulation in software development for decades, and now we finally have it for HTML pages, as well.

As a practical example, think about how many times you've written (or, more likely, copy-and-pasted) the HTML, CSS and JavaScript you need to create a modal "loading" spinner. I've done it at least a dozen times that I can recall.

Enough already, where's the code?

The first step in creating my "loading modal" component was identifying the bits I previously copy-pasted, and doing one FINAL copy-paste.

It generally starts with some HTML:

COPY

And corresponding CSS:

COPY

And we need a little JavaScript to show and hide the div as needed:

COPY

First Draft

In order to make that disparate bunch of stuff a single, unified (encapsulated) Web Component, we create a JS file which defines our component:

COPY

There you have a basic - and useless - web component. We use the function to define the HTML tag we'll use to use our component (), and the class which will implement the component. We need a constructor (and always call to ensure everything sets up correctly), and we need to attach a "Shadow Root" to our component instance.

This is basically a tiny DOM which is private to each instance of our component: each time we use that tag on a page, we'll be creating another copy of the tiny DOM inside the page's big DOM.

Now, what do we put into the tiny DOM? Our HTML and CSS, from above, like this:

COPY

Just copy-paste. Simple. But now we need to be able to show the thing on demand. Remember I said the is a tiny DOM inside the component. Well, that means that things inside that tiny DOM are encapsulated - we shouldn't try to go mucking about with them directly. We need to add functions to the component which we can call to show and hide the loader. These live inside the component class, and are ALMOST the same as we'd get from copy-pasting the original:

COPY

Eureka!

Now, we can build a really simple proof of concept page:

COPY

Working, but too simple

We have a very simple component. It works. But, it's not very flexible. In the next article, we'll talk about that.