Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5 WebComponents Primer

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Mirko Sertic Mirko Sertic
May 06, 2017
Programming
0
560

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
Tweet

More Decks by Mirko Sertic

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

Other Decks in Programming

See All in Programming
20260228_JAWS_Beginner_Kansai
Avatar for Takuya Yonezawa takuyay0ne
5
590
Redox OS でのネームスペース管理と chroot の実現
Avatar for isan isanethen
0
270
Agentic AI: Evolution oder Revolution
Avatar for Lars Roewekamp mobilelarson
PRO
0
190
「接続」—パフォーマンスチューニングの最後の一手 〜点と点を結ぶ、その一瞬のために〜
Avatar for 武田 憲太郎 kentaroutakeda
3
990
Understanding Apache Lucene - More than just full-text search
Avatar for Alexander Reelsen spinscale
0
130
SourceGeneratorのマーカー属性問題について
Avatar for tkym htkym
0
200
車輪の再発明をしよう！PHP で実装して学ぶ、Web サーバーの仕組みと HTTP の正体
Avatar for H1R0 h1r0
0
130
PHPのバージョンアップ時にも役立ったAST（2026年版）
Avatar for Atsushi Matsuo matsuo_atsushi
0
150
「やめとこ」がなくなった — 1月にZennを始めて22本書いた AI共創開発のリアル
Avatar for atani atani14
0
400
エンジニアの「手元の自動化」を加速するn8n 2026.02.27
Avatar for 西尾義英 symy2co
0
160
AI 開発合宿を通して得た学び
Avatar for ニフティ株式会社 niftycorp
PRO
0
150
ふつうのRubyist、ちいさなデバイス、大きな一年 / Ordinary Rubyists, Tiny Devices, Big Year
Avatar for chobishiba chobishiba
1
480

Featured

See All Featured
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
100
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
180
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.4k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
64
53k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
250
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.1k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.1k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.2k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k

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!