Web Components is an effort to introduce custom controls into HTML5. A control that is isolated, having its own source code and user interface was a common thing in Delphi or Windows Forms (UserControl class). In the world of web technologies, however, everything is still glued into one big confusing whole. We have one object, such as a search box, in three different places. Somewhere there is HTML, somewhere there is CSS and somewhere there is JavaScript. The new HTML element Template can encapsulate everything.
Efforts to create Web components have been around since 1998, when Microsoft designed and implemented HTML Components in IE 5.5. Other attempts followed, such as XBL and XBL2 from Mozilla or Shadow DOM from Google. These techniques had only a narrow area of use. The current effort of all major browser makers is to harmonize several individual techniques together so that together they allow a web page to be composed of individual components that are themselves separate and encapsulated.
In the Microsoft Edge Developer Suggestion Box, the most requested techniques are Shadow DOM, Custom Elements, and Template Element. Web components are thus clearly among the new techniques an area that web developers are interested in. Therefore, Microsoft has started to implement the HTML element template. After that, work will continue on Shadow DOM and Custom Elements.
Element <template>
The HTML element template, as the name suggests, serves as a template. The element itself is not rendered, nor does it have any semantic meaning. Using the importNode JavaScript method, it can be cloned, filled with content and inserted into the DOM.
Why can't we instead use ordinary div, which would have the CSS property display set to none? Because if div contained an image, the browser would start downloading it. And if it contained a script, the browser would start executing it.
You might think of not using div, but perhaps the script element, which has the script attribute set to something other than text/javascript, and inserting its text content using the innerHTML property. However, this is potentially dangerous, because the text content of the script element must be thoroughly protected against XSS attacks.
So what does the code that template uses look like?
<template id="template">
<style>
…
</style>
<script>
…
</script>
<p class="…"></p>
<img src="…" />
</template>This is an HTML markup that contains a style, a script, a paragraph, and an image. Everything is wrapped in a template.
var template = document.querySelector("#template");
var clone = document.importNode(template.content, true);
var p = clone.querySelector("p");
p.textContent = "Nějaký text.";
document.body.appendChild(clone);The javascript code first finds the right template. It then creates a clone of its contents. Each element can be in the DOM at most once. Next, a paragraph is found and filled with some text. Finally, the clone is inserted into the DOM. At that point, the style is applied, the script is executed and the image starts loading.
It is not yet clear how the encapsulation will be performed. Styles should be applied only to elements that are in the template, not to other elements in the environment. Similarly, the script should only have access to elements in the template, not to the entire DOM.
The specification is being developed and it will take some time to stabilize. Writing a website based on web components is not yet worth it at the moment. Their implementation in Chrome is already incompatible with the latest specification.