Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
HTML5 WebComponents Primer
Mirko Sertic
May 06, 2017
Programming
0
90
HTML5 WebComponents Primer
An older Talk I gave some time ago, refreshed for an upcoming Team event.
Mirko Sertic
May 06, 2017
Tweet
Share
More Decks by Mirko Sertic
See All by Mirko Sertic
mirkosertic
2
100
mirkosertic
0
75
mirkosertic
0
84
mirkosertic
0
190
Other Decks in Programming
See All in Programming
dulltz
0
530
dictoss
0
170
daiki1020
0
1.1k
siketyan
1
120
muttsu_623
0
540
steipete
PRO
2
170
fkubota
1
400
yosuke_furukawa
PRO
14
3.9k
ogidow
0
170
azdaroth
0
140
maito1201
0
170
akatsukinewgrad
0
220
Featured
See All Featured
edds
56
9.3k
addyosmani
1348
190k
philhawksworth
190
17k
jakevdp
775
200k
mojombo
358
62k
chriscoyier
499
130k
chrislema
231
16k
dougneiner
119
7.8k
dougneiner
55
5.4k
schacon
145
6.6k
keithpitt
401
20k
jeffersonlam
328
15k
Transcript
@mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de WebComponents Primer
@mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Als Primer (Pl.: die Primer;
IPA: [ˊpʁaɪ̯mɐ]) wird in der Molekularbiologie ein Oligonukleotid bezeichnet, das als Startpunkt für DNA-replizierende Enzyme wie die DNA-Polymerase dient.
@mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de 2D / 3D Canvas Microdata
Drag & Drop API WebComponents Cross Document Messaging
@mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de 2D / 3D Canvas Microdata
Drag & Drop API WebComponents Cross Document Messaging
@mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de WebComponents <body> <my-tabview> <div>Tab1</div> <div>Tab2</div>
</my-tabview> </body>
@mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de WebComponents <head> <link rel="import" href="my-tabview.html">
</head> <body> <my-tabview> <div>Tab1</div> <div>Tab2</div> </my-tabview> </body>
@mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de WebComponents <template id="mytemplate"> <div>Titel meiner
tollen Tab Komponente</div> <div> … … </div> </template>
@mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de WebComponents <template id="mytemplate"> <style>…</style> <div>Titel
meiner tollen Tab Komponente</div> <div> … … </div> </template>
@mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de WebComponents <script> var importDoc =
document.currentScript.ownerDocument; var myTabViewPrototype = Object.create(HTMLElement.prototype); myTabPrototype.createdCallback = function() { var shadow = this.createShadowRoot(); var template = importDoc.querySelector('#mytemplate'); shadow.appendChild(template.content.cloneNode(true)); }; document.registerElement(‘my-tabview‘, { prototype: myTabViewPrototype }); </script>
@mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de WebComponents <script> var importDoc =
document.currentScript.ownerDocument; var myTabViewPrototype = Object.create(HTMLElement.prototype); myTabPrototype.createdCallback = function() { var shadow = this.createShadowRoot(); var template = importDoc.querySelector('#mytemplate'); shadow.appendChild(template.content.cloneNode(true)); }; document.registerElement(‘my-tabview‘, { prototype: myTabViewPrototype }); </script> 1
@mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de WebComponents <script> var importDoc =
document.currentScript.ownerDocument; var myTabViewPrototype = Object.create(HTMLElement.prototype); myTabPrototype.createdCallback = function() { var shadow = this.createShadowRoot(); var template = importDoc.querySelector('#mytemplate'); shadow.appendChild(template.content.cloneNode(true)); }; document.registerElement(‘my-tabview‘, { prototype: myTabViewPrototype }); </script> 1 2
@mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de WebComponents <script> var importDoc =
document.currentScript.ownerDocument; var myTabViewPrototype = Object.create(HTMLElement.prototype); myTabPrototype.createdCallback = function() { var shadow = this.createShadowRoot(); var template = importDoc.querySelector('#mytemplate'); shadow.appendChild(template.content.cloneNode(true)); }; document.registerElement(‘my-tabview‘, { prototype: myTabViewPrototype }); </script> 1 2 3
@mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de WebComponents <body> <my-tabview> </my-tabview> </body>
<div>Tab1</div> <div>Tab2</div>
@mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de WebComponents <body> <my-tabview> </my-tabview> </body>
<div>Tab1</div> <div>Tab2</div> Shadow DOM Host Shadow DOM Root
@mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Komplexe Anwendung
@mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Komplexe Anwendung
@mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Stand der Implementierung
@mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Was gibt es noch? Google
Polymer Vue.js
@mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Fragen? falls nicht, besten Dank
für die Aufmerksamkeit!