One of the AngularJS projects might be rewritten in Angular and one of the jQuery projects is being rewritten in Angular. Probably half of the developers are wishing they were using React and a tenth wishing they were using Elm.
Maybe a way of avoiding costly rewrites would be to have a look at web components.
Our goal is to display a
h1 tag with an icon to the left. The icon should produce a link to the heading in our browsers search bar. The result is similar to what we see when we hover on any of the headings (take
Setup for example) in a README.md file on GitHub.
We can preview the result of what we’re going to create on GitHub Pages
Using a web component makes sense because we will be, similar to the usual README, use the element multiple times.
Our web component will have two main parts. The markup and the behavior. The markup can be divided into style and structure.
Via css we’re specifying hidden visibility on anchor tags (
a) and make them visible when hovering over a
We make use of Shadow DOM. Shadow DOM allows us to encapsulate, or rather shadow, the markup structure, style and behavior of a component hidden from the rest of the page. Thus styles applied to the shadowed component won’t leak out to the page and page styles won’t bleed in. As a result the styles above will not be applied to
a tags outside of our component.
Additionally name conflicts are harder since
document.querySelector() won’t return nodes in the components shadow DOM.
Our goal is to use the following in our
Using an ES6 class expression we define the behavior of our web component.
We define our
shadowRoot in the constructor and set our
connectedCallback(), which is called after the element is attached to the DOM. The
id of the component is set to use the
The value of
id will be
My title as defined in the markup above.
Then we make sure the anchor tag points to the title and the heading uses the title
Finally we define our custom tag to enable it.
We’re now able to use it in our html page. See index.html.
As a nice addition there are
slots. A slot allows us to define placeholders in the template. These placeholders can be filled with any markup and are used to display a description after the heading in our example. If we don’t provide a description we use the text
To show it’s usage
We can grab QUnit and start testing. QUnit might seem like an “outdated” choice but it’s, at the time of this writing, still used by jQuery and the testing guide of ember. It should be a stable choice for the future.
A simple test suite, verifying the two main properties of the web component might start as follows.
testStart function we create the component and make sure to remove it from the
body in the
The following tests will make sure the
title is displayed.
The next one makes sure we have a direct link to the heading.
In the end we access the
shadowRoot of the element and find the property we want to assert on via
querySelector. Easy enough for now.
Of course the example above might be considered simplistic. There are no HTTP request and the components are not nested (components within components within components…)
But for now the above should serve as an introductory example.