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
460
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
530
WebAssembly - ein Jahr danach
mirkosertic
0
430
From Legacy to modern Web
mirkosertic
0
430
Objektorientierung, Domain-Driven Design und Architectur
mirkosertic
1
720
Other Decks in Programming
See All in Programming
各クラウドサービスにおける.NETの対応と見解
ymd65536
0
180
Zoneless Testing
rainerhahnekamp
0
120
「Chatwork」Android版アプリを 支える単体テストの現在
okuzawats
0
180
StarlingMonkeyを触ってみた話 - 2024冬
syumai
3
280
テストコード書いてみませんか?
onopon
2
210
17年周年のWebアプリケーションにTanStack Queryを導入する / Implementing TanStack Query in a 17th Anniversary Web Application
saitolume
0
250
Online-Dokumentation, die hilft: Strukturen, Prozesse, Tools
ahus1
0
100
rails stats で紐解く ANDPAD のイマを支える技術たち
andpad
1
300
毎日13時間もかかるバッチ処理をたった3日で60%短縮するためにやったこと
sho_ssk_
1
360
テストケースの名前はどうつけるべきか?
orgachem
PRO
0
160
Androidアプリのモジュール分割における:x:commonを考える
okuzawats
1
190
KMP와 kotlinx.rpc로 서버와 클라이언트 동기화
kwakeuijin
0
190
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
What's in a price? How to price your products and services
michaelherold
244
12k
Become a Pro
speakerdeck
PRO
26
5k
We Have a Design System, Now What?
morganepeng
51
7.3k
Side Projects
sachag
452
42k
Embracing the Ebb and Flow
colly
84
4.5k
YesSQL, Process and Tooling at Scale
rocio
170
14k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
910
Navigating Team Friction
lara
183
15k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.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!