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
250
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
290
WebAssembly - ein Jahr danach
mirkosertic
0
230
From Legacy to modern Web
mirkosertic
0
250
Objektorientierung, Domain-Driven Design und Architectur
mirkosertic
0
470
Other Decks in Programming
See All in Programming
jq at the Shortcuts
cockscomb
1
440
Swift Expression Macros: a practical introduction
kishikawakatsumi
2
740
AWSにおける標的型Bot対策
hacomono
0
430
LIFFで動く割り勘アプリTATEKAをリリースしてみた話
inoue2002
0
260
TokyoR#103_DataProcessing
kilometer
0
540
Cloudflare Workersと状態管理
chimame
3
490
Remix + Cloudflare Pages + D1 で ポケモン SV のレンタルチームを検索できるアプリを作ってみた
kuroppe1819
4
1.4k
Rust、何もわからない...#6発表資料
ryu19
0
130
ちょうぜつ改め21世紀ふつうのソフトウェア設計
tanakahisateru
7
6.5k
Unityでのチート対策を簡単かつ高品質に行う為の取り組み
trapezoid
2
1.1k
低レイヤーから始める GUI
fadis
18
9.4k
Zynq MP SoC で楽しむエッジコンピューティング ~RTLプログラミングのススメ~
ryuz88
0
390
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
74
4.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
13
1.1k
Visualization
eitanlees
128
12k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
29
7.9k
How GitHub (no longer) Works
holman
298
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
6
840
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
10k
Debugging Ruby Performance
tmm1
67
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
338
18k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Imperfection Machines: The Place of Print at Facebook
scottboms
254
12k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
24
4.6k
Transcript
@mirkosertic |
[email protected]
| https://www.mirkosertic.de WebComponents Primer
@mirkosertic |
[email protected]
| 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 |
[email protected]
| https://www.mirkosertic.de 2D / 3D Canvas Microdata
Drag & Drop API WebComponents Cross Document Messaging
@mirkosertic |
[email protected]
| https://www.mirkosertic.de 2D / 3D Canvas Microdata
Drag & Drop API WebComponents Cross Document Messaging
@mirkosertic |
[email protected]
| https://www.mirkosertic.de WebComponents <body> <my-tabview> <div>Tab1</div> <div>Tab2</div>
</my-tabview> </body>
@mirkosertic |
[email protected]
| 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 |
[email protected]
| https://www.mirkosertic.de WebComponents <template id="mytemplate"> <div>Titel meiner
tollen Tab Komponente</div> <div> … … </div> </template>
@mirkosertic |
[email protected]
| https://www.mirkosertic.de WebComponents <template id="mytemplate"> <style>…</style> <div>Titel
meiner tollen Tab Komponente</div> <div> … … </div> </template>
@mirkosertic |
[email protected]
| 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 |
[email protected]
| 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 |
[email protected]
| 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 |
[email protected]
| 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 |
[email protected]
| https://www.mirkosertic.de WebComponents <body> <my-tabview> </my-tabview> </body>
<div>Tab1</div> <div>Tab2</div>
@mirkosertic |
[email protected]
| https://www.mirkosertic.de WebComponents <body> <my-tabview> </my-tabview> </body>
<div>Tab1</div> <div>Tab2</div> Shadow DOM Host Shadow DOM Root
@mirkosertic |
[email protected]
| https://www.mirkosertic.de Komplexe Anwendung
@mirkosertic |
[email protected]
| https://www.mirkosertic.de Komplexe Anwendung
@mirkosertic |
[email protected]
| https://www.mirkosertic.de Stand der Implementierung
@mirkosertic |
[email protected]
| https://www.mirkosertic.de Was gibt es noch? Google
Polymer Vue.js
@mirkosertic |
[email protected]
| https://www.mirkosertic.de Fragen? falls nicht, besten Dank
für die Aufmerksamkeit!