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
200
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
Hinter den Kulissen von SCS Architekturen
mirkosertic
2
230
WebAssembly - ein Jahr danach
mirkosertic
0
180
From Legacy to modern Web
mirkosertic
0
200
Objektorientierung, Domain-Driven Design und Architectur
mirkosertic
0
380
Other Decks in Programming
See All in Programming
From Java 11 to 17 and beyond
josepaumard
0
290
TDX22: User-Mode DB Ops
ca_peterson
3
1.1k
Modern Web Apps with Spring Boot, Angular & TypeScript
toedter
12
14k
Git Rebase
bkuhlmann
7
1k
Swift Concurrencyによる安全で快適な非同期処理
tattn
2
300
Securing Kafka Connect Pipelines with Client-Side Field Level Cryptography @ Kafka Summit London 2022
hpgrahsl
0
310
バンドル最適化マニアクス at tfconf
mizchi
3
2.1k
偏見と妄想で語るスクリプト言語としての Swift / Swift as a Scripting Language
lovee
2
240
Monadic Java
mariofusco
4
260
JGS594 Lecture 23
javiergs
PRO
0
400
Let's make a contract: the art of designing a Java API
mariofusco
0
160
ebpfとWASMに思いを馳せる2022 / techfeed-conference-2022-ebpf-wasm-amsy810
masayaaoyama
0
560
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
19
1.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
Learning to Love Humans: Emotional Interface Design
aarron
261
37k
A Tale of Four Properties
chriscoyier
149
20k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
350
21k
Music & Morning Musume
bryan
35
4.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
343
17k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
4
2k
Three Pipe Problems
jasonvnalue
89
8.6k
A Philosophy of Restraint
colly
192
14k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
890
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!