Web Components je snaha zavést vlastní ovládací prvky do HTML5. Ovládací prvek, který je izolovaný, mající vlastní zdrojový kód a uživatelské rozhraní, byla úplně běžná věc už v Delphi nebo Windows Forms (třída UserControl). Ve světě webových technologií se ale vše stále lepí do jednoho velkého nepřehledného celku. Jeden objekt, například vyhledávací pole, máme na třech různých místech. Někde je HTML, jinde CSS a kdesi JavaScript. Nový HTML element Template dokáže vše zapouzdřit.
Snaha o vytvoření webových součástí tu byla už v roce 1998, kdy Microsoft navrhl a implementoval HTML Components do IE 5.5. Následovaly další pokusy jako XBL a XBL2 od Mozilly nebo Shadow DOM od Googlu. Tyto techniky měly pouze úzkou oblast využití. Současnou snahou všech hlavních tvůrců prohlížečů je několik jednotlivých technik dohromady sladit tak, aby společně umožňovaly skládat webovou stránku z jednotlivých součástí, které jsou samy o sobě samostatné a zapouzdřené.
V Microsoft Edge Developer Suggestion Boxu jsou nejžádanější techniky Shadow DOM, Custom Elements a Template Element. Webové komponenty jsou tak jednoznačně mezi novými technikami oblastí, o kterou mají weboví vývojáři zájem. Microsoft proto začal s implementací HTML elementu template. Poté bude práce pokračovat na Shadow DOM a Custom Elements.
Element <template>
HTML element template, jak už název napovídá, slouží jako šablona. Element samotný se nevykresluje, ani nemá žádný sémantický význam. Pomocí javascriptové metody importNode se dá naklonovat, naplnit obsahem a vložit do DOMu.
Proč místo toho nemůžeme použít obyčejný div, který by měl nastavenou CSS vlastnost display na hodnotu none? Protože pokud by div obsahoval obrázek, prohlížeč by ho totiž začal stahovat. A kdyby obsahoval skript, prohlížeč by ho začal vykonávat.
Možná vás napadne nepoužít div, ale třeba element script, který má atribut script nastavený na něco jiného než text/javascript, a jeho textový obsah vložit pomocí vlastnosti innerHTML. To je však potenciálně nebezpečné, protože textový obsah elementu script musí být důsledně ošetřen proti XSS útoku.
Jak tedy vypadá kód, který template využívá?
<template id="template">
<style>
…
</style>
<script>
…
</script>
<p class="…"></p>
<img src="…" />
</template>Toto je HTML markup, který obsahuje styl, skript, odstavec a obrázek. Vše je zabalené do šablony.
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);Javascriptový kód nejprve najde ten správný template. Poté vytvoří klon jeho obsahu. Každý element totiž může být v DOMu nejvýše jednou. Dále se najde odstavec a naplní se nějakým textem. Nakonec se klon vloží do DOMu. V tom okamžiku se aplikuje styl, vykoná skript a začne načítat obrázek.
Zatím není jasné, jakým způsobem se provede zapouzdření. Styly by správně měly být uplatněny jen na elementy, které jsou v šabloně, nikoliv na jiné elementy v okolí. Podobně skript by měl mít přístup jen k elementům v šabloně, ne k celému DOMu.
Specifikace se vyvíjí a bude ještě nějakou dobu trvat, než se ustálí. Psát nějaký web založený na web components se v současné době ještě nevyplatí. Jejich implementace v Chrome je už teď nekompatibilní s poslední specifikací.