Web Components:The four core elements

Written in


Custom Elements </>

Probably the most obvious aspect of a web component is the ability to create, modify and control HTML elements. The introduction of Custom Elements into browser standards enables us to break away from the limited vocabulary that HTML offers. This means we can create true mark-up semantics that are really meaningful in context of the application, whatever that may be, gone are the days of endlessly nested <div> tags with a littering of classes trying to suggest a structure as Custom Elements provide us with the ability to write some truly beautiful HTML.

There are a range of new JavaScript methods that enable you to create, register, style and add JavaScript properties and methods all within one new HTML element, and these are outlined really well at html5rocks

One thing that is worth noting is that standards have been defined for the naming convention of Custom Elements, any element must contain a hyphen, this ensures that Custom Elements are easily identified as such amount core conflicts with future core HTML elements, as well as mitigating the risk of any conflicts with future core HTML Elements.

HTML Templates

Templating HTML mark-up is not a new concept, there are many frameworks that provide this type of approach to building a user interface. They all provide a more streamlined way of managing blocks of HTML, but HTML Templates as a defined part of HTML spec is much more elegant. The new <template> tag can be used to bundle HTML, CSS and JavaScript together and keep all of its contents encapsulated. Think of these blocks of code as reusable snippets that are easily shared with other developers and projects. The time spent writing the same HTML structures will be dramatically reduced without the need of a framework to do so. Content can be used within a template that resides outside it within a DOM element. This can be achieved by using the <content> tag within your template and then attaching that template to the desired element with content. Anything within a template is not rendered in the browser on load but simply made available to be integrated with the DOM using JavaScript. Any content within a template can be used and reused as you wish and if bound to a new Custom Elements within it, then the Shadow DOM can be kept out of the DOM as we know it.

HTML Imports

So if we are creating a load of new Custom Elements and templates and bringing these components together, our HTML mark-up is going to get cluttered and confusing really quickly. This could rapidly lead to unmanageable mark-up and even more verbose code that before we were using these new techniques. One of the key benefits of using Web Components is the elegance of the code that can be produced, it’s all good for your code in the browser to be beautiful, but if their code you are working with  something isn’t quite right. This is where HTML imports come in, the <link> tag can be used with a ‘rel’ attribute value of import and this tells the browser to import the contents of the source file into your page. It seems just like an include but when we combine this with the HTML Template we can keep our template code blocks, including any CSS and JavaScript, in separate files. Our working code becomes just as well written as that seen by the browser, and templates are even easier to share and reuse.


Shadow DOM

So last but most definitely not least, we have the shadow DOM, this is arguably the most powerful part of Web Components. Each HTML element in the DOM, whether it is core or custom, can have its own DOM hidden within it.

The JavaScript method createShadowRoot () can be used to create this for a new Custom Element. A template that has been imported can then in turn define the structure of this Shadow DOM. It works by bringing all four elements together and giving us a fully functional web component to work with. There is much more going on here than it may seem, the Shadow DOM is not just a way of hiding code, it actually deals with the encapsulation issues inherent in HTML, CSS and JavaScript. For example, if you styled a selector that just happened to match a selector within your Shadow DOM you would expect it to be effected. But the Shadow DOM protects its contents from this, keeping a defined scope for the component. This is vital in enabling the production of reusable components. The door is not completely closed though, you can style the contents of a Shadow DOM by using the shadow selector in CSS, or alternatively style an element from its own Shadow DOM using the host selector. The Shadow DOM seems like something special at first, but when you use it you’ll notice that it’s used everywhere.



Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.