Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
HTML5 WebComponents Primer
Search
Mirko Sertic
May 06, 2017
Programming
0
500
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
630
WebAssembly - ein Jahr danach
mirkosertic
0
460
From Legacy to modern Web
mirkosertic
0
460
Objektorientierung, Domain-Driven Design und Architectur
mirkosertic
1
760
Other Decks in Programming
See All in Programming
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
300
Comparing decimals in Swift Testing
417_72ki
0
100
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
660
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
3
480
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
140
新しいモバイルアプリ勉強会(仮)について
uetyo
1
190
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
810
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
540
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
860
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
370
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
220
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
10k
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
A better future with KSS
kneath
238
17k
Gamification - CAS2011
davidbonilla
81
5.4k
Music & Morning Musume
bryan
46
6.7k
Statistics for Hackers
jakevdp
799
220k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
GitHub's CSS Performance
jonrohan
1031
460k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
The Language of Interfaces
destraynor
158
25k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
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!