Custom Elements: An HTML Web Component

HTML standards change from day to day. This constant evolution makes it fun to imagine where the technology is headed. The most recent evolution is the introduction of web components.  Components come in the form of templates, decorators, and elements. These allow for portions of code to be simply reused throughout a page or application. The following are clearly basic examples, but applying this to multiple sections across our pages can help simplify and reduce all of our code.

The simplest of the components, the template can be seen below.

That’s it.  The template only contains the markup that will be displayed. The template element is never rendered on the page and only has the content property.  The content in the case of the template is everything inside of the tag.  Populating the template with content can then be done dynamically through JavaScript or a library such asknockout.js.

Why is this nice? Well if you take a look at the template code you’ll notice the class name “comment”.  Say this template was going to be used for the commenting section on a blog.  You now have an easily reusable element that can be dynamically populated with content through javascript.  Making your overall HTML markup easier to manage.

Moving on to the next item; decorators are elements with the purpose of changing the presentation of already existing elements.  Decorator elements will contain a template element that defines everything needed for the decorator.

You’ll notice a content element rests inside of this code block.  This is the section of the decorator where the content should be inserted.  How are decorators called you may ask.  Well this is simply done in the CSS.  Using the decorator rule and specifying which decorator to use, you can apply your decorator to any CSS class, element, or id.

Now an element with the poem class will have the decorator applied to it and would render out like this.

One of the interesting things about decorators when compared to templates is they can handle event listeners by using an event controller.  Note that the script for the decorator will only be run once when the element is parsed and then placed into the DOM.  A decorator with a script will end looking like the following.

Let’s wrap up this article by taking a look at custom elements.  These are new to the DOM and while they can define presentation aspects like decorators, they cannot however change type.  The main purpose of custom elements is for implementing new states or behaviors.  A custom element will require two attributes.

The extends attribute is the base HTML element that the custom element is extended from.  In the case above a button is being used.  As for the name attribute, it is there as a reference point in the markup.  The “x-“ prefix is required to prevent any possible conflicts from occurring in the code.  Inside of the element tag the author can place code such as templates or scripts.

The simplest form of implementing the custom element is to use the HTML element it is extended from as seen below.  So we use “extends=’button’” above meaning our HTML element would be the

You’ll notice the “is” attribute on the button.  Since we can use a variety of HTML tags for a custom element we need a way to specify our element.  That is what this attribute does for us.  One of the best parts about the custom element is the ability to include them in a separate component file and then simply using the to include however many elements you need.

Imagine building out your own personal blog or perhaps a series of blogs that reuse many of the same elements.  You could contain all of the similar elements in one file that when updated would reflect across not only multiple pages, but even multiple sites.  By combining the power of the new HTML web components we can simplify your code.  Doing this should then hopefully allow us to concentrate more on creating rich and rewarding user experiences.  As the HTML standard grows, it should prove to be interesting to see where exactly it goes.

Want to learn more about Apexon? Consult with an expert here.