- What are web components?
- A Components lifecycle
- Building our to-do app
- Setting properties
- Setting attributes
- Reflecting properties to attributes
- Events
- Browser support and polyfills
- Wrapping up
Web components are getting more and more traction. With the Edge team's recent announcement of implementing Custom Elements and Shadow DOM, all major browsers will soon support web components natively. Companies like Github, Netflix, Youtube and ING are even already using web components in production. Neat! However, surprisingly enough, none of those huge, succesful companies have implemented a (you guessed it) to-do app!
So today, we'll be making a to-do app, because the world doesn't have enough implementations of to-do apps yet. You can take a look at what we'll be making here.
Before we start, I'd like to add a little disclaimer that this blogpost is intended to get a better grasp of the basics of web components. Web components are low level, and should probably not be used to write full blown applications without the use of any helper libraries, nor should they be compared to full blown frameworks.
- Make a demo
- The boring stuff
- Setting properties
- Setting attributes
- Reflecting properties to attributes
- Events
- Wrap it up
First things first: Web components are a set of standards that allow us to write modular, reusable and encapsulated HTML tags. And the best thing about them: since they're based on web standards, we don't have to install any framework or library to start using them. You can start writing web components using vanilla javascript, right now!
But before we start getting our hands dirty, lets take a look at the specifications that let us write web components.
The Custom Elements api allows us to author our own DOM elements. Using the api, we can define a custom element, and inform the parser how to properly construct that element and how elements of that class should react to changes. Have you ever wanted your own HTML element, like <my-cool-element>? Now you can!
Shadow DOM gives us a way to encapsulate the styling and markup of our components. It's a sub DOM tree attached to a DOM element, to make sure none of our styling leaks out, or gets overwritten by any external styles. This makes it great for modularity.
The ES Modules specification defines the inclusion and reuse of JS documents in a standards based, modular, performant way.
The HTML <template> tag allows us to write reusable chunks of DOM. Inside a template, scripts don't run, images don't load, and styling/mark up is not rendered. A template tag itself is not even considered to be in the document, until it's activated. HTML templates are great, because for every instance of our element, only 1 template is used.
Now that we know which specifications web components leverage, let's take a look at a custom element's lifecycle. I know, I know, we'll get to the code soon!
Let's take a look at a custom element's lifecycle. Consider the following element:
https://gist.github.com/a5a4960024f8f167e1b97353c11d5d52
The constructor runs whenever an element is created, but before the element is attached to the document. We'll use the constructor for setting some initial state, event listeners, and creating the shadow DOM.
The connectedCallback is called when the element is inserted to the DOM. It's a good place to run setup code, like fetching data, or setting default attributes.
The disconnectedCallback is called whenever the element is removed from the DOM. Clean up time! We can use the disconnectedCallback to remove any event listeners, or cancel intervals.
The attributeChangedCallback is called any time your element's observed attributes change. We can observe an element's attributes by implementing a static observedAttributes getter, like so:
https://gist.github.com/231f2fbf49093f73887830369cf2ea23
In this case, any time the my-attr attribute is changed, the attributeChangedCallback will run. We'll go more in-depth on this later this blog post.
✨ Hey! Listen!
Only attributes listed in the
observedAttributesgetter are affected in theattributeChangedCallback.
The adoptedCallback is called each time the custom element is moved to a new document. You'll only run into this use case when you have <iframe> elements in your page.
And finally, though not part of the lifecycle, we register our element to the CustomElementRegistry like so:
https://gist.github.com/c803ccd3bafb355a9473ded73d80e3db
The CustomElementRegistry is an interface that provides methods for registering custom elements and querying registered elements. The first argument of the registries' define method will be the name of the element, so in this case it'll register <my-element>, and the second argument passes the class we made.
✨ Hey! Listen!
It's important to note how we name our web components. Custom element names must always contain a hyphen. For example:
<my-element>is correct, and<myelement>is not. This is done deliberately to avoid clashing element names, and to create a distinction between custom elements and regular elements.Custom elements also cannot be self-closing because HTML only allows a few elements to be self-closing. These are called void elements, like
<br/>or<img/>, or elements that don't allow children nodes.Allowing self-closing elements would require a change in the HTML parser, which is a problem since HTML parsing is security sensitive. HTML producers need to be able to rely on how a given piece of HTML parses in order to be able to implement XSS-safe HTML generation.
- Make a demo
- The boring stuff
- Setting properties
- Setting attributes
- Reflecting properties to attributes
- Events
- Wrap it up
Now that we're done with all the boring stuff, we can finally get our hands dirty and start building our to do app! Click here to see the end result.
Let's start with an overview of what we're going to build.
-
A
<to-do-app>element:- Contains an array of to-do's as property
- Adds a to-do
- Removes a to-do
- Toggles a to-do
-
A
<to-do-item>element:- Contains a description attribute
- Contains an index attribute
- Contains a checked attribute
Great! Let's lay out the groundwork for our to-do-app:
to-do-app.js:
https://gist.github.com/242235e9afc658123c0ef81421bb94ca
We're going to take this step by step. We first create a <template> by calling const template = document.createElement('template');, and then we set some HTML in it. We only set the innerHTML on the template once. The reason we're using a template is because cloning templates is much cheaper than calling .innerHTML for all instances of our component.
Next up, we can actually start defining our element. We'll use our constructor to attach our shadowroot, and we'll set it to open mode. Then we'll clone our template to our shadowroot. Cool! We've now already made use of 2 web components specifications, and succesfully made an encapsulated sub DOM tree.
What this means is that we now have a DOM tree that will not leak any styles, or get any styles overwritten. Consider the following example:
We have a global h1 styling that makes any h1 in the light DOM a red color. But because we have our h1 in a shadow-root, it does not get overwritten by the global style.
Note how in our to-do-app component, we've used a :host pseudo class, this is how we can add styling to the component from the inside. An important thing to note is that the display is always set to display: inline;, which means you can't set a width or height on your element. So make sure to set a :host display style (e.g. block, inline-block, flex) unless you prefer the default of inline.
✨ Hey! Listen!
Shadow DOM can be a little confusing. Allow me to expand a little bit on terminology:
The light DOM lives outside the component's shadow DOM, and is basically anything that is not shadow DOM. For example, the
<h1>Hello world</h1>up there lives in the light DOM. The term light DOM is used to distinguish it from the Shadow DOM. It's perfectly fine to make web components using light DOM, but you miss out on the great features of shadow DOM.Since the latest version (V1) of the shadow DOM specification, we can now use
openorclosedshadow DOM. Open shadow DOM allows us to create a sub DOM tree next to the light DOM to provide encapsulation for our components. Our shadow DOM can still be pierced by javascript like so:document.querySelector('our-element').shadowRoot. One of the downsides of shadow DOM is that web components and still relatively young, and many external libraries don't account for it.Closed shadow roots are not very applicable, as it prevents any external javascript from piercing the shadowroot. Closed shadow DOM makes your component less flexible for yourself and your end users and should generally be avoided.
Some examples of elements that do use a closed shadow DOM are the
<video>element.
Cool. We've made our first web component, but as of now, it's absolutely useless. It would be nice to be able to pass some data to it and render a list of to-do's.
Let's implement some getters and setters.
to-do-app.js:
https://gist.github.com/056dce601a8e5040496b213fb1435ce0
Now that we have some getters and setters, we can pass some rich data to our element! We can query for our component and set the data like so:
https://gist.github.com/1c8eb772e03c18e143e9261169fe9cf3
We've now succesfully set some properties on our component, and it should currently look like this:
Great! Except it's still useless because we cannot interact with anything without using the console. Let's quickly implement some functionality to add new to-do's to our list.
https://gist.github.com/2ac61e89b470a103860fcfa55c42f1bf
This should be easy enough to follow, we set up some querySelectors and addEventListeners in our constructor, and on a click event we want to push the input to our to-do's list, render it, and clear the input again. Ez 👏.
- Make a demo
- The boring stuff
- Setting properties
- Setting attributes
- Reflecting properties to attributes
- Events
- Wrap it up
This is where things will get confusing, as we'll be exploring the differences between attributes and properties, and we'll also be _reflecting properties to attributes. Hold on tight!
First, let's create a <to-do-item> element.
to-do-item.js:
https://gist.github.com/06cd385ad6fa83eceec03eee1366b913
Note that since we're using a ES Modules, we're able to use
const template = document.createElement('template');again, without overriding the previous template we made.
And lets change our _renderTodolist function in to-do-app.js to this:
https://gist.github.com/60960ee9bb6a5588bd4553b6f07e6ff5
Alright, a lot of different stuff is going on here. Let's dive in. Previously, when passing some rich data (an array) to our <to-do-app> component, we set it like this:
https://gist.github.com/2a4dc923855f963d91996f26383152d8
We did that, because todos is a property of the element. Attributes are handled differently, and don't allow rich data, in fact, they only allow a String type as a limitation of HTML. Properties are more flexible and can handle complex data types like Objects or Arrays.
The difference is that attributes are defined on HTML elements. When the browser parses the HTML, a corresponding DOM node will be created. This node is an object, and therefore it has properties. For example, when the browser parses: <to-do-item index="1">, a HTMLElement object will be created. This object already contains several properties, such as children, clientHeight, classList, etc, as well as some methods like appendChild() or click(). We can also implement our own properties, like we did in our to-do-app element, which we gave a todos property.
Here's an example of this in action.
https://gist.github.com/01f0265e8ceda3f720a5c9349134895f
The browser will parse this <img> element, create a DOM Element object, and conveniently set the properties for src and alt for us. It should be mentioned that this property reflection is not true for all attributes. (Eg: the value attribute on an <input> element does not reflect. The value property of the <input> will always be the current text content of the <input>, and the value attribute will be the initial text content.) We’ll go deeper into reflecting properties to attributes shortly.
So we now know that the alt and src attributes are handled as String types, and that if we'd want to pass our array of to-do's to our <to-do-app> element like this:
https://gist.github.com/f69145a04c6bcce324b28e4fa1ad0fea
We would not get the desired result; we're expecting an array, but actually, the value is simply a String that looks like an array.
✨ Hey! Listen!
- Aim to only accept rich data (objects, arrays) as properties.
- Do not reflect rich data properties to attributes.
Setting attributes works differently from properties as well, notice how we didn't implement any getters or setters. We added our text attribute to the static get observedAttributes getter, to allow us to watch for changes on the text attribute. And we implemented the attributesChangedCallback to react to those changes.
Our app should look like this, at this moment in time:
We're not done with attributes just yet. It would be nice to be able to check off some of our to-do's when we're done with them, and we'll be using attributes for that as well. We have to handle our Boolean attributes a little differently though.
The presence of a boolean attribute on an element represents the
Truevalue, and the absence of the attribute represents theFalsevalue.
If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.
The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.
<div hidden="true">is incorrect.
This means that only the following examples are acceptable for a true value:
https://gist.github.com/00674fb0e8bba20edc8cff8a8db100a3
So let's implement the checked attribute for our <to-do-item> element!
Change your to-do-app.js to this:
https://gist.github.com/97f49701999130960c8ffece65e4a9ff
And change to-do-item to this:
https://gist.github.com/56974a5f32c0ff09b189ffbe3ff9b0c7
Nice! Our application should look like this:
- Make a demo
- The boring stuff
- Setting properties
- Setting attributes
- Reflecting properties to attributes
- Events
- Wrap it up
Cool, our app is coming along nicely. But it would be nice if our end user would be able to query for the status of checked of our to-do-item component. We've currently set it only as an attribute, but we would like to have it available as a property as well. This is called reflecting properties to attributes.
All we have to do for this is add some getters and setters. Add the following to your to-do-item.js:
https://gist.github.com/ff2fc73ed2461d5634d34934360b3b8d
Now, every time we change the property or the attribute, the value will always be in sync.
- Make a demo
- The boring stuff
- Setting properties
- Setting attributes
- Reflecting properties to attributes
- Events
- Wrap it up
Phew, now that we're done with the hard bits, it's time to get to the fun stuff. Our application currently handles and exposes the data in a way we want to, but it doesn't actually remove or toggle the to-do's yet. Let's take care of that.
First, we're going to have to keep track of the index of our to-do-items. Let's set up an attribute!
to-do-item.js:
https://gist.github.com/f2c98d68d983a8a394b45eb63fd763ca
Note how we're parsing the String type value to an integer here, since attributes only allow a String type, but we'd like the end user to be able to get the index property as an integer. And we also now have a nice example of how to deal with string/number/boolean attributes and how to handle attributes and properties as their actual type.
So let's add some getters and setters to to-do-item.js:
https://gist.github.com/a684036ebcf222a5f7167442260871bb
And change our _renderTodoList function in to-do-app.js to:
https://gist.github.com/14e4104525be33d582de378db502a96f
✨ Hey! Listen!
If we set
{ detail: this.index, composed: false }(which it is by default) end users won't be able to listen for the event outside of your shadow root.
And add the _removeTodo function in to-do-app.js:
https://gist.github.com/890398a76a8b419b19b257e757f149c0
Sweet! We're able to delete to-do's:
And finally, let's create a toggle functionality as well.
to-do-app.js:
https://gist.github.com/69d94e8a267379f6be9c96101866ca7a
And to-do-item.js:
https://gist.github.com/4b4a604d4f3cea1266e75c242fbc0ca0
Success! We can create, delete, and toggle to-do's!
- Make a demo
- The boring stuff
- Setting properties
- Setting attributes
- Reflecting properties to attributes
- Events
- Wrap it up
The last thing I'd like to address in this blog post is browser support. At time of writing, the Microsoft Edge team has recently announced that they'll be implementing custom elements as well as shadow DOM, meaning that all major browsers will soon natively support web components.
Until that time, you can make use of the webcomponentsjs polyfills, maintained by Google.
- Make a demo
- The boring stuff
- Setting properties
- Setting attributes
- Reflecting properties to attributes
- Events
- Wrap it up
Done!
If you've made it all the way down here, congratulations! You've learned about the web components specifications, (light/open/closed) shadow DOM, templates, the difference between attributes and properties, and reflecting properties to attributes.
But as you can probably tell, a lot of the code that we've written may feel a little clunky, we've written quite a lot of boiler plate (getters, setters, queryselectors, etc), and a lot of things have been handled imperatively. Our updates to the to do list aren't very performant, either.
"Web components are neat, but I don't want to spend all this time writing boiler plate and setting stuff imperatively, I want to write declarative code!", you cry.
Enter lit-html, which we'll cover in the next blog post.