Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5 WebComponents Primer

219cd340806b9ddcaee60427c2d07d26?s=47 Mirko Sertic
May 06, 2017
Programming
0
200

HTML5 WebComponents Primer

An older Talk I gave some time ago, refreshed for an upcoming Team event.

219cd340806b9ddcaee60427c2d07d26?s=128

Mirko Sertic

May 06, 2017
Tweet

More Decks by Mirko Sertic

See All by Mirko Sertic
Hinter den Kulissen von SCS Architekturen
219cd340806b9ddcaee60427c2d07d26?s=48 mirkosertic
2
230
WebAssembly - ein Jahr danach
219cd340806b9ddcaee60427c2d07d26?s=48 mirkosertic
0
180
From Legacy to modern Web
219cd340806b9ddcaee60427c2d07d26?s=48 mirkosertic
0
200
Objektorientierung, Domain-Driven Design und Architectur
219cd340806b9ddcaee60427c2d07d26?s=48 mirkosertic
0
380

Other Decks in Programming

See All in Programming
From Java 11 to 17 and beyond
F784a8de872a5d98f67ac5ccbd6683d0?s=48 josepaumard
0
290
TDX22: User-Mode DB Ops
3cf3d4d85fad3d196c1127018a370418?s=48 ca_peterson
3
1.1k
Modern Web Apps with Spring Boot, Angular & TypeScript
A0aae1297a0593c1316abdcdb4131e3a?s=48 toedter
12
14k
Git Rebase
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
7
1k
Swift Concurrencyによる安全で快適な非同期処理
0620564f0125b8b3b7f4fe40c10b8b4e?s=48 tattn
2
300
Securing Kafka Connect Pipelines with Client-Side Field Level Cryptography @ Kafka Summit London 2022
744f1c2c6cbea2ff5104b0ac512936bd?s=48 hpgrahsl
0
310
バンドル最適化マニアクス at tfconf
3aebd86547bfc5cdb451d5f2f95ed5d8?s=48 mizchi
3
2.1k
偏見と妄想で語るスクリプト言語としての Swift / Swift as a Scripting Language
Af64bc38c0ffcfcabdf430759ee491ce?s=48 lovee
2
240
Monadic Java
9eafc29df96e6aaf4a3eb4c0209086ae?s=48 mariofusco
4
260
JGS594 Lecture 23
B546a9b97d993392e4b22b74b99b91fe?s=48 javiergs
PRO
0
400
Let's make a contract: the art of designing a Java API
9eafc29df96e6aaf4a3eb4c0209086ae?s=48 mariofusco
0
160
ebpfとWASMに思いを馳せる2022 / techfeed-conference-2022-ebpf-wasm-amsy810
De266761b955b2636e454a1bc7a99ed4?s=48 masayaaoyama
0
560

Featured

See All Featured
Build The Right Thing And Hit Your Dates
016edace78ffe826f2348d1e0c504afd?s=48 maggiecrowley
19
1.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
Learning to Love Humans: Emotional Interface Design
5f50f94346fbcb23706f0707169317a4?s=48 aarron
261
37k
A Tale of Four Properties
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
149
20k
Dealing with People You Can't Stand - Big Design 2015
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
350
21k
Music & Morning Musume
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
35
4.1k
Building Better People: How to give real-time feedback that sticks.
9952dfcd5d338f8a8e7175c8a8f65fb5?s=48 wjessup
343
17k
Art Directing for the Web. Five minutes with CSS Template Areas
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
196
9.4k
StorybookのUI Testing Handbookを読んだ
50fc0fdc2327ecbe7350645812de52e3?s=48 zakiyama
4
2k
Three Pipe Problems
11c84dff30266b907714802088852677?s=48 jasonvnalue
89
8.6k
A Philosophy of Restraint
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
192
14k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
12
890

Transcript

  1. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de WebComponents Primer

  2. @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.

  3. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de 2D / 3D Canvas Microdata

    Drag & Drop API WebComponents Cross Document Messaging

  4. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de 2D / 3D Canvas Microdata

    Drag & Drop API WebComponents Cross Document Messaging

  5. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de WebComponents <body> <my-tabview> <div>Tab1</div> <div>Tab2</div>

    </my-tabview> </body>

  6. @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>

  7. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de WebComponents <template id="mytemplate"> <div>Titel meiner

    tollen Tab Komponente</div> <div> … … </div> </template>

  8. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de WebComponents <template id="mytemplate"> <style>…</style> <div>Titel

    meiner tollen Tab Komponente</div> <div> … … </div> </template>

  9. @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>

  10. @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

  11. @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

  12. @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

  13. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de WebComponents <body> <my-tabview> </my-tabview> </body>

    <div>Tab1</div> <div>Tab2</div>

  14. @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

  15. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Komplexe Anwendung

  16. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Komplexe Anwendung

  17. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Stand der Implementierung

  18. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Was gibt es noch? Google

    Polymer Vue.js

  19. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Fragen? falls nicht, besten Dank

    für die Aufmerksamkeit!