Getting Started with Web Components and Polymer 2.0 — Part 1

You’ve heard of the DOM. Most of the time you’ve heard bad things. DOM traversal slow! DOM operations are expensive! DOM API is a mess! Its true that the DOM gets its share of bad press but when we take a step back and calm ourselves, we realize that the DOM is the most critical part of what we do as web developers and it’s of paramount importance that we make an effort to understand it.

DOM or the Document Object Model is the object graph representation of the declarative HTML markup. Every HTML tag gets translated into an object internally. For example, a simple <div> gets translated into HTMLDivElement or a <span> gets translated into an HTMLSpanElement. When the parser runs, it knows which object to instantiate based on the markup that it encountered. Essentially, every HTML tag is backed by a class.

W e know that some HTML elements encapsulate their representation. An example being the <h1> tag. We know that whatever text we enclose within an <h1> tag has its font-size at 2em, font-weight bold and display block. Some elements take attributes that dictate some behavior. An example being the <a> tag which takes an “href” attribute which allows us to link to a different page. This ability of encapsulating representation and behavior is achieved by the browser’s internal APIs that are used to implement different types of elements.

Enter web components. Web Components are a set of lower level APIs that the browser exposes so that they can be used to develop custom elements which can encapsulate representational logic and behavioral logic. Since web component APIs are native to the browsers, these custom elements can function framework and library free natively on a browser that supports the web components specification.

Web components primarily composes of 4 features:

• Custom Elements
• Shadow DOM
• HTML Imports
• HTML Templates

Lets dig deeper into each one of these features and the part you’ve been waiting for…the code!

Custom Elements

Custom Elements allow new HTML tags to be implemented. Custom elements can be extended from existing custom elements. They can be dropped in and used like any HTML tag. They can be created by using the basic building blocks of web development — html, css and javascript.

The simplest way to create a custom element is to extend HTMLElement and register the element part of the browser’s vocabulary.

The element can now simply be used like any other HTML tag.

<name-tag></name-tag>

However, we see no difference. This is because no implementation has been defined for this custom element. Lets add that in.

Now, if we just use <name-tag></name-tag> as an HTML element, we see the following output on the page:

This is a custom element

Lets make our element a little bit smarter. For the custom element to be usable, it must have a public API through which properties can be provided to the element which would dictate how the component would render. Lets implement this behavior with the intention that we will use the element like <name-tag name=”John Doe” />:

We can now not only use the element as if the element was available as part of HTML’s standard vocabulary like <name-tag name=”John” />, but we can also use it with javascript just like we can with any other natively provided element:

Lets summarize the workflow for a custom element:

• A class is created that extends the HTMLElement class. This tells the browser to treat the custom element as an HTML element.
• Decide on the properties or attributes that will be passed to the element. Decide which properties can change and expose those by returning a list of the property names from the observedAttributes static method.
• Properties or attributes that we expect will be passed to the element is stored as local variables in the class’s constructor.
• Implement the attibuteChangedCallback method which gets invoked every time a property in the observation list changes. This method is used to call property setters. The attributeChangedCallback is a part of a few lifecycle hooks that come with custom elements.
• Define simple ES6 getters and setters for the properties which set the local property values and perform some rendering logic, for example setting the innerHTML.

If you have followed along, you’ve created your first custom element. As promised, this element will work natively on any browser that is web components compliant. We will get to how we can ship the custom element at a later post.

We will come back to custom elements since the posts are meant to build on top of each other. Stay tuned for Part II where we look at Shadow DOM.

Hacker Noon is how hackers start their afternoons. We’re a part of the @AMIfamily. We are now accepting submissions and happy to discuss advertising &sponsorship opportunities.

To learn more, read our about page, like/message us on Facebook, or simply, tweet/DM @HackerNoon.

If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!