Dajbych.net


Začal vývoj Web Components pro Microsoft Edge

, 3 minuty čtení

Web Com­po­nents je snaha zavést vlastní ovlá­dací prvky do HTML5. Ovlá­dací prvek, který je izolo­vaný, ma­jící vlastní zdro­jový kód a uži­va­tel­ské rozhraní, byla úplně běžná věc už v Del­phi nebo Windows Forms (třída User­Con­trol). Ve světě we­bových tech­nologií se ale vše stále lepí do jed­noho velkého nepřeh­led­ného celku. Je­den ob­jekt, napřík­lad vyh­ledá­vací pole, máme na třech různých místech. Někde je HTML, jinde CSS a kdesi JavaScript. Nový HTML el­e­ment Tem­plate dokáže vše zapouzdřit.

Snaha o vytvoření we­bových součástí tu byla už v roce 1998, kdy Mi­crosoft navrhl a im­ple­men­to­val HTML Com­po­nents do IE 5.5. Násle­dovaly další pokusy jako XBL a XBL2 od Mozilly nebo Shadow DOM od Googlu. Tyto tech­niky měly pouze úzkou oblast využití. Součas­nou sna­hou všech hlavních tvůrců proh­lížečů je něko­lik jed­notlivých tech­nik dohro­mady sla­dit tak, aby společně umožňo­valy sk­lá­dat we­bovou stránku z jed­notlivých součástí, které jsou samy o sobě samostatné a zapouzdřené.

V Mi­crosoft Edge De­vel­oper Sugges­tion Boxu jsou ne­jžá­danější tech­niky Shadow DOM, Cus­tom El­e­ments a Tem­plate El­e­ment. We­bové kom­po­nenty jsou tak jed­noz­načně mezi novými tech­nikami oblastí, o kterou mají we­boví vývo­jáři zá­jem. Mi­crosoft proto začal s im­ple­men­tací HTML el­e­mentu tem­plate. Poté bude práce pokračo­vat na Shadow DOM a Cus­tom El­e­ments.

Element <template>

HTML el­e­ment tem­plate, jak už název napovídá, slouží jako šablona. El­e­ment samotný se nevykres­luje, ani nemá žádný sé­mantický výz­nam. Po­mocí javascrip­tové me­tody im­portN­ode se dá nak­lono­vat, napl­nit ob­sa­hem a vložit do DOMu.

Proč místo toho nemůžeme použít obyče­jný div, který by měl nas­tavenou CSS vlast­nost dis­play na hod­notu none? Pro­tože pokud by div ob­sa­ho­val obrázek, proh­lížeč by ho totiž začal sta­ho­vat. A kdyby ob­sa­ho­val skript, proh­lížeč by ho začal vykoná­vat.

Možná vás na­padne nepoužít div, ale třeba el­e­ment script, který má atribut script nas­tavený na něco jiného než text/javascript, a jeho tex­tový ob­sah vložit po­mocí vlast­nosti in­n­er­HTML. To je však po­ten­ciálně nebezpečné, pro­tože tex­tový ob­sah el­e­mentu script musí být důsledně ošetřen proti XSS útoku.

Jak tedy vy­padá kód, který tem­plate využívá?

<template id="template"> <style> … </style> <script> … </script> <p class="…"></p> <img src="…" /> </template>

Toto je HTML markup, který ob­sahuje styl, skript, od­s­tavec a obrázek. Vše je za­balené 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);

Javascrip­tový kód ne­jprve na­jde ten správný tem­plate. Poté vytvoří klon jeho ob­sahu. Každý el­e­ment totiž může být v DOMu ne­jvýše jed­nou. Dále se na­jde od­s­tavec a naplní se ně­jakým tex­tem. Nakonec se klon vloží do DOMu. V tom okamžiku se ap­likuje 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 uplat­něny jen na el­e­menty, které jsou v šabloně, niko­liv na jiné el­e­menty v okolí. Podobně skript by měl mít přístup jen k el­e­men­tům v šabloně, ne k celému DOMu.

Speci­fikace se vyvíjí a bude ještě ně­jakou dobu tr­vat, než se ustálí. Psát ně­jaký web založený na web com­po­nents se v současné době ještě nevyplatí. Je­jich im­ple­men­tace v Chrome je už teď nekom­pat­i­bilní s poslední speci­fikací.