Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

HTML5 WebComponents Primer

Avatar for Mirko Sertic Mirko Sertic
May 06, 2017
Programming
590
0

HTML5 WebComponents Primer

An older Talk I gave some time ago, refreshed for an upcoming Team event.

Avatar for Mirko Sertic

Mirko Sertic

May 06, 2017

More Decks by Mirko Sertic

See All by Mirko Sertic
Hinter den Kulissen von SCS Architekturen
Avatar for Mirko Sertic mirkosertic
2
750
WebAssembly - ein Jahr danach
Avatar for Mirko Sertic mirkosertic
0
550
From Legacy to modern Web
Avatar for Mirko Sertic mirkosertic
0
530
Objektorientierung, Domain-Driven Design und Architectur
Avatar for Mirko Sertic mirkosertic
1
840

Other Decks in Programming

See All in Programming
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
300
Agents on Rails - Rails at Scale 2026
Avatar for Irina Nazarova irinanazarova
0
180
AI Agent時代のリアーキテクチャ戦略と実践
Avatar for Kazuhito Hokamura hokaccha
9
4.9k
[Rails World 2026] Durable orchestration on Rails: from continuation to workflow
Avatar for Vladimir Dementyev palkan
0
170
世界の中心で、AI（App Intents）をさけぶ ー App Intents中心設計の実践ガイド
Avatar for touyou touyou
0
650
巨大モノリシックアプリ モダン化大作戦
Avatar for Ryomm ktcryomm
1
1.1k
TiDB Cloudのカスタムコントローラーによるオートスケール対応
Avatar for takaidohigasi takaidohigasi
0
130
Verilogで学ぶCPU自作入門.pdf
Avatar for uyuki uyuki234
2
1.7k
AGENTS.md Is Not Enough: Build Skills, Don't Download Them
Avatar for Alex T lx_t
0
130
変化を抱擁するドキュメントの作り方 - ビジネスルール駆動開発がもたらす、コードとの新しい関係
Avatar for ioki ioki
2
220
Java 27新機能 / Java 27 new features
Avatar for Naoki Kishida kishida
2
170
Ghostty + Neovimで作る 透明でカッコ良い開発環境
Avatar for Kanade Nonomura j341nono
0
110

Featured

See All Featured
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
280
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
510
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
1.2k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
6k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
3
1.3k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
50
10k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.6k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
2
3.9k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
5M

Transcript

  1. @mirkosertic | [email protected] | https://www.mirkosertic.de WebComponents Primer

  2. @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.

  3. @mirkosertic | [email protected] | https://www.mirkosertic.de 2D / 3D Canvas Microdata

    Drag & Drop API WebComponents Cross Document Messaging

  4. @mirkosertic | [email protected] | https://www.mirkosertic.de 2D / 3D Canvas Microdata

    Drag & Drop API WebComponents Cross Document Messaging

  5. @mirkosertic | [email protected] | https://www.mirkosertic.de WebComponents <body> <my-tabview> <div>Tab1</div> <div>Tab2</div>

    </my-tabview> </body>

  6. @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>

  7. @mirkosertic | [email protected] | https://www.mirkosertic.de WebComponents <template id="mytemplate"> <div>Titel meiner

    tollen Tab Komponente</div> <div> … … </div> </template>

  8. @mirkosertic | [email protected] | https://www.mirkosertic.de WebComponents <template id="mytemplate"> <style>…</style> <div>Titel

    meiner tollen Tab Komponente</div> <div> … … </div> </template>

  9. @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>

  10. @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

  11. @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

  12. @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

  13. @mirkosertic | [email protected] | https://www.mirkosertic.de WebComponents <body> <my-tabview> </my-tabview> </body>

    <div>Tab1</div> <div>Tab2</div>

  14. @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

  15. @mirkosertic | [email protected] | https://www.mirkosertic.de Komplexe Anwendung

  16. @mirkosertic | [email protected] | https://www.mirkosertic.de Komplexe Anwendung

  17. @mirkosertic | [email protected] | https://www.mirkosertic.de Stand der Implementierung

  18. @mirkosertic | [email protected] | https://www.mirkosertic.de Was gibt es noch? Google

    Polymer Vue.js

  19. @mirkosertic | [email protected] | https://www.mirkosertic.de Fragen? falls nicht, besten Dank

    für die Aufmerksamkeit!