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
610
WebAssembly - ein Jahr danach
mirkosertic
0
460
From Legacy to modern Web
mirkosertic
0
460
Objektorientierung, Domain-Driven Design und Architectur
mirkosertic
1
750
Other Decks in Programming
See All in Programming
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
0
210
UPDATEがシステムを複雑にする? イミュータブルデータモデルのすすめ
shimomura
0
490
がんばりすぎないコーディングルール運用術
tsukakei
1
210
Zennの運営完全に理解した #完全に理解したTalk
wadayusuke
1
170
從零到一:搭建你的第一個 Observability 平台
blueswen
0
300
事業戦略を理解してソフトウェアを設計する
masuda220
PRO
18
5.5k
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
110
#QiitaBash TDDでAIに設計イメージを伝える
ryosukedtomita
2
1.7k
MLOps Japan 勉強会 #52 - 特徴量を言語を越えて一貫して管理する, 『特徴量ドリブン』な MLOps の実現への試み
taniiicom
2
620
AIにコードを生成するコードを作らせて、再現性を担保しよう! / Let AI generate code to ensure reproducibility
yamachu
7
6.2k
複数アプリケーションを育てていくための共通化戦略
irof
9
3.5k
人には人それぞれのサービス層がある
shimabox
3
630
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
RailsConf 2023
tenderlove
30
1.1k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Speed Design
sergeychernyshev
30
980
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
Automating Front-end Workflow
addyosmani
1370
200k
Visualization
eitanlees
146
16k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
180
53k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
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!