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

Web Components

Avatar for Nikolaus Graf Nikolaus Graf
September 12, 2013
Programming
6
20k

Web Components

Web Components are like Lego bricks. Easy to assemble and every piece simply fits together. But there is even more to it. Being able to create your own HTML-Tags with encapsulated style & logic changes the way you think about structuring your web applications. Get a sneak peek on how to develop scalable & maintainable applications in the future.
Avatar for Nikolaus Graf

Nikolaus Graf

September 12, 2013
Tweet

More Decks by Nikolaus Graf

See All by Nikolaus Graf
Building End-to-End Encrypted Apps
Avatar for Nikolaus Graf nikgraf
0
34
Secsync - Utility to persit & relay end-to-end encrypted CRDTs
Avatar for Nikolaus Graf nikgraf
0
33
Creating an Augmented Reality App - Using ViewAR and React
Avatar for Nikolaus Graf nikgraf
2
180
Type Systems & Props Design - Exploring PropTypes, TypeScript, Flow & Reason
Avatar for Nikolaus Graf nikgraf
0
360
Reason and GraphQL
Avatar for Nikolaus Graf nikgraf
2
65
Get started with Reason
Avatar for Nikolaus Graf nikgraf
2
520
React Vienna November Intro
Avatar for Nikolaus Graf nikgraf
0
6.3k
Rich text editing with Draft.js
Avatar for Nikolaus Graf nikgraf
0
270
Introduction to React + Redux
Avatar for Nikolaus Graf nikgraf
1
580

Other Decks in Programming

See All in Programming
20250426 GDGoC 合同新歓 - GDGoC のススメ
Avatar for Yoshimura Naoya getty708
0
110
プロダクト横断分析に役立つ、事前集計しないサマリーテーブル設計
Avatar for Uchide Hiroki(ucchi-) hanon52_
3
550
AIコーディングの理想と現実
Avatar for Tomohisa Takaoka tomohisa
35
37k
UMAPをざっくりと理解 / Overview of UMAP
Avatar for kaityo256 kaityo256
PRO
3
1.5k
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
Avatar for Masayuki Izumi izumin5210
6
1.5k
Flutterでllama.cppをつかってローカルLLMを試してみた
Avatar for sakuraidayo sakuraidayo
0
130
RuboCop: Modularity and AST Insights
Avatar for Koichi ITO koic
2
2.6k
Road to RubyKaigi: Making Tinny Chiptunes with Ruby
Avatar for makicamel makicamel
4
540
Ruby on Railroad: The Power of Visualizing CFG
Avatar for ydah ydah
0
300
On-the-fly Suggestions of Rewriting Method Deprecations
Avatar for Masato Ohba ohbarye
3
5k
インプロセスQAにおいて大事にしていること / In-process QA Meetup
Avatar for MEDLEY, INC. medley
0
140
バイラテラルアップサンプリング
Avatar for Fadis fadis
3
340

Featured

See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
280
13k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
49k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.8k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
13
840
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.1k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
133
9.3k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
91
6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
344
40k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
45
7.2k

Transcript

  1. Web Components

  2. Who is this guy? nikgraf www.nikgraf.com nik@blossom.io Web Components

  3. How to Use <html> <head> <link rel="import" href="/path/calendar.html"> </head> <body>

    <custom-calendar></custom-calendar> </body> </html> index.html Web Components

  4. Web Components

  5. How to Use <html> <head> <link rel="import" href="/path/to/map.html"> </head> <body>

    <open-street-map location-x=”13.252601623535156” location-y=”52.45077881417044” zoom=”5”> </open-street-map> </body> </html> index.html Web Components

  6. Web Components

  7. Web Component Web Components

  8. Why? Component Component Component • Encapsulation • Reusability • Composability

    Web Components

  9. Easier and Faster Prototyping <bootstrap-modal> <h2>Welcome to Berlin</h2> <open-street-map location-x=”13.252601623535156”

    location-y=”52.45077881417044” zoom=”5”> </open-street-map> </bootstrap-modal> Web Components

  10. Web Component • HTML Templates inert chunks of clonable DOM

    • Custom Elements create new HTML elements • Shadow DOM encapsulation & boundaries inside of DOM • HTML Imports import html documents Web Components

  11. Client Side Templating <script id="clock-template" type="text/x-type-template"> <span class=”hour”></span>: <span class=”minute”></span>

    </script> HTML encourages run-time string parsing (.innerHTML) user-supplied data → Cross-site scripting Web Components

  12. HTML Templates <template id="clock-tmpl"> <span class=”hour”></span>: <span class=”minute”></span> </template> <script>

    var template = document.querySelector("#clock-tmpl"); // comment is a DocumentFragment var comment = template.content.cloneNode(true); </script> Web Components HTML

  13. HTML Templates Web Components Working directly with the DOM no

    runtime script parsing, smaller XSS attack vector Hidden from document cannot traverse into its DOM via JavaScript Content gets parsed, not rendered <script> tags aren’t executed, images aren't loaded, media doesn't play, etc.

  14. “ ” Shadow DOM Web Components Shadow DOM gives us

    markup encapsulation, style boundaries, and exposes (to web developers) the same mechanics browsers vendors have been using to implement their internal UI. Eric Bidelman

  15. Shadow DOM Web Components Let’s dig deeper

  16. Web Components

  17. Shadow DOM <div id="clock"></div> <script> var host = document.querySelector('#clock'); //

    use webkitCreateShadowRoot for now var shadowRoot = host.createShadowRoot(); shadowRoot.innerHTML = "<span>14</span>: <span>30</span>"; </script> Web Components HTML

  18. Shadow DOM <h2>Black header</h2> <script> var host = document.createElement('div'); var

    shadowRoot = host.createShadowRoot(); var content = "<style>h2 {color: red}</style>"; content += "<h2>Red header</h2>"; shadowRoot.innerHTML = content; document.body.appendChild(host); </script> Black header Red header Web Components HTML

  19. Shadow DOM shadowRoot.resetStyleInheritance = false; shadowRoot.applyAuthorStyles = false; @host {

    *:hover { color: red }; } <span pseudo="x-hour"></span> <my-clock id=”clock”></my-clock> <style> #clock::x-hour { color: blue; } </style> Web Components HTML Component CSS clock.html Template index.html

  20. Custom Elements var ClockPrototype = Object.create(HTMLElement.prototype); ClockPrototype.createdCallback = function() {

    this.impl.textContent = "14:20"; }; var Clock = document.register('custom-clock', { prototype: ClockPrototype }); var clock = new Clock(); // adds <custom-clock>14:20</custom-clock> to the DOM document.body.appendChild(clock); Web Components tick_tock_clock.html

  21. <link rel="import" href="clock.html"> <script> var link = document.querySelector('link[rel=import]'); var content

    = link.import.querySelector('#clock'); </script> HTML Imports Web Components <div id="clock"> <span class=”hour”>14</span>: <span class=”minute”>30</span> </div> clock.html index.html

  22. Web Component Web Components <template id="clock-tmpl"> <span class=”hour”>14</span>: <span class=”minute”>30</span>

    </template> <script> var ClockProto = Object.create(HTMLElement.prototype); ClockProto.createdCallback = function() { var template = document.querySelector('#clock-tmpl'); var shadowRoot = this.createShadowRoot(); var clone = template.content.cloneNode(true); shadowRoot.appendChild(clone); }; document.register('my-clock', {prototype: ClockProto}); </script> <link rel="import" href="clock.html"> <my-clock></my-clock> clock.html index.html

  23. Use Web Components today Web Components

  24. Web Component (Polymer.js) Web Components <polymer-element name="my-clock"> <template> <span class=”hour”>14</span>:

    <span class=”minute”>30</span> </template> <script>Polymer('my-clock');</script> </polymer-element> <link rel="import" href="clock.html"> <my-clock></my-clock> clock.html index.html

  25. Think Big Web Components <login-form></login-form>

  26. Thanks for listening! nikgraf www.nikgraf.com nik@blossom.io Web Components

  27. Further Reading Web Components Web Components http://www.youtube.com/watch?v=fqULJBBEVQE https://dvcs.w3.org/hg/webcomponents/raw-file/57f8cfc4a7dc/explainer/index.html HTML Templates

    http://www.html5rocks.com/en/tutorials/webcomponents/template/ https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html HTML Imports http://robdodson.me/blog/2013/08/20/exploring-html-imports/ https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/imports/index.html

  28. Further Reading Web Components Shadow DOM http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/ http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/ http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-301/ http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/

    https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html Custom Elements http://www.html5rocks.com/en/tutorials/webcomponents/customelements/ https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/custom/index.html Resources Web Components https://plus.google.com/103330502635338602217/posts Lego Bricks http://commons.wikimedia.org/wiki/File:2_duplo_lego_bricks.jpg Polymer Architecture http://www.polymer-project.org/ Icons http://pictos.cc/