Dajbych.net


Začal vývoj Web Components pro Microsoft Edge

, 4 minuty čtení

Web Com­po­nents je snaha za­vést vlastní ovlá­dací prvky do HTML5. Ovlá­dací pr­vek, který je izo­lo­vaný, mající vlastní zdro­jový kód a uži­va­tel­ské roz­hraní, byla úplně běžná věc už v Del­phi nebo Windows Forms (třída User­Con­t­rol). Ve světě we­bo­vých tech­no­lo­gií se ale vše stále lepí do jed­noho vel­kého ne­pře­hled­ného celku. Je­den ob­jekt, na­pří­klad vyhle­dá­vací pole, máme na třech různých mís­tech. Ně­kde je HTML, jinde CSS a kdesi Ja­vaScript. Nový HTML ele­ment Tem­plate do­káže vše za­pouz­d­řit.

Snaha o vy­tvo­ření we­bo­vých sou­částí tu byla už v roce 1998, kdy Micro­soft na­vrhl a im­ple­men­to­val HTML Com­po­nents do IE 5.5. Ná­sle­do­valy další po­kusy jako XBL a XBL2 od Mo­zilly nebo Sha­dow DOM od Go­o­glu. Tyto tech­niky měly pouze úzkou ob­last vyu­žití. Sou­čas­nou sna­hou všech hlav­ních tvůrců pro­hlí­žečů je ně­ko­lik jed­not­li­vých tech­nik do­hro­mady sla­dit tak, aby spo­lečně umož­ňo­valy sklá­dat we­bo­vou stránku z jed­not­li­vých sou­částí, které jsou samy o sobě sa­mo­statné a za­pouz­dřené.

Micro­soft Edge De­ve­lo­per Su­g­ges­tion Boxu jsou nej­žá­da­nější tech­niky Sha­dow DOM, Cus­tom Ele­ments a Tem­plate Ele­ment. We­bové kom­po­nenty jsou tak jed­no­značně mezi no­vými tech­ni­kami ob­lastí, o kte­rou mají we­boví vý­vo­jáři zá­jem. Micro­soft proto za­čal s im­ple­men­tací HTML ele­mentu tem­plate. Poté bude práce po­kra­čo­vat na Sha­dow DOM a Cus­tom Ele­ments.

Element <template>

HTML ele­ment tem­plate, jak už ná­zev na­po­vídá, slouží jako šab­lona. Ele­ment sa­motný se ne­vy­kres­luje, ani nemá žádný sé­man­tický význam. Po­mocí ja­vascrip­tové me­tody im­port­Node se dá na­klo­no­vat, na­pl­nit ob­sahem a vlo­žit do DOMu.

Proč místo toho ne­mů­žeme po­u­žít oby­čejný div, který by měl na­sta­ve­nou CSS vlast­nost dis­play na hod­notu none? Pro­tože po­kud by div ob­saho­val ob­rá­zek, pro­hlí­žeč by ho totiž za­čal staho­vat. A kdyby ob­saho­val skript, pro­hlí­žeč by ho za­čal vy­ko­ná­vat.

Možná vás na­padne ne­po­u­žít div, ale třeba ele­ment script, který má atri­but script na­sta­vený na něco ji­ného než text/ja­vascript, a jeho tex­tový ob­sah vlo­žit po­mocí vlast­nosti in­nerHTML. To je však po­ten­ci­álně ne­bez­pečné, pro­tože tex­tový ob­sah ele­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 mar­kup, který ob­sahuje styl, skript, od­sta­vec a ob­rá­zek. Vše je zabalené do šab­lony.

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);

Ja­vascrip­tový kód nej­prve na­jde ten správný tem­plate. Poté vy­tvoří klon jeho ob­sahu. Každý ele­ment totiž může být v DOMu nej­výše jed­nou. Dále se na­jde od­sta­vec a na­plní se ně­jakým tex­tem. Na­ko­nec se klon vloží do DOMu. V tom okamžiku se apli­kuje styl, vy­koná skript a začne na­čítat ob­rá­zek.

Zatím není jasné, jakým způ­so­bem se pro­vede za­pouz­dření. Styly by správně měly být uplat­něny jen na ele­menty, které jsou v šab­loně, ni­ko­liv na jiné ele­menty v okolí. Po­dobně skript by měl mít přístup jen k ele­men­tům v šab­loně, ne k ce­lému DOMu.

Spe­ci­fi­kace se vy­víjí a bude ještě ně­ja­kou 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ď ne­kom­pa­ti­bilní s po­slední spe­ci­fi­kací.