Web Components
Revoluce v HTML?
Ondřej Žára, Seznam.cz
Ondřej Žára, Seznam.cz
<template>
<div class="person"><img /></div>
<script>new Person(...)</script>
</template>
content, což je DocumentFragmentvar template = document.querySelector("template");
var parent = document.body;
parent.appendChild(template.content.cloneNode(true));
<head>
<link rel="import" href="/path/to/stuff.html" />
</head>
@import<head>
<link rel="import" href="/path/to/stuff.html" />
</head>
var link = document.querySelector("link[rel=import]");
var node = link.import.querySelector("...");
document.body.appendChild(node);
<!-- importovaný dokument -->
<div>hi there</div>
var masterDoc = document;
var importDoc = document.currentScript.ownerDocument;
var div = importDoc.querySelector("div");
masterDoc.body.appendChild(div);
<szn-map x="..." y="..." controls="keyboard mouse zoom pan" />
var map1 = new SznMap({x:..., y:..., control: ...});
var map2 = document.createElement("szn-map");
document.body.appendChild(map1);
map1.appendChild(map2);
<button is="szn-button" />)var SznMap = document.registerElement("szn-map", descriptor);instanceof HTMLElement), dokud nedojde k registraciregisterElement) popisuje chování značkyvar proto = Object.create(HTMLDivElement.prototype);
var SznMap = document.registerElement("szn-map", {prototype:proto});
var proto = Object.create(HTMLButtonElement.prototype);
var SznButton = document.registerElement("szn-button", {
prototype: proto,
extends: "button"
});
var button = document.createElement("button", "szn-button");
<button is="szn-button" />
createdCallback vykonán ve chvíli vzniku značky (či její registrace)attachedCallback vykonán po připnutí do stromudetachedCallback vykonán po odepnutí ze stromuattributeChangedCallback vykonán při změně (přidání, odebrání) atributu
all:initial; provede reset všech vlastností (hodí se i bez SD):host vybere Shadow host (rodičovský uzel SD)<template>
<ul class="important">
<content select=".important"></content>
</ul>
<ul>
<content></content>
</ul>
</template>
<ul is="szn-list">
<li>...</li>
<li class="important">...</li>
</ul>
Prostor pro otázky
Ondřej Žára, Prgač UI – důchodce, ondrej.zara@firma.seznam.cz