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

Web Components

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.

Nikolaus Graf

September 12, 2013
Tweet

More Decks by Nikolaus Graf

See All by Nikolaus Graf
Building End-to-End Encrypted Apps
nikgraf
0
24
Secsync - Utility to persit & relay end-to-end encrypted CRDTs
nikgraf
0
22
Creating an Augmented Reality App - Using ViewAR and React
nikgraf
2
160
Type Systems & Props Design - Exploring PropTypes, TypeScript, Flow & Reason
nikgraf
0
360
Reason and GraphQL
nikgraf
2
63
Get started with Reason
nikgraf
2
470
React Vienna November Intro
nikgraf
0
6.2k
Rich text editing with Draft.js
nikgraf
0
260
Introduction to React + Redux
nikgraf
1
570

Other Decks in Programming

See All in Programming
ふかぼれ！CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
Creating a Free Video Ad Network on the Edge
mizoguchicoji
0
120
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.3k
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
470
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
100
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
subpath importsで始めるモック生活
10tera
0
300
詳細解説！ ArrayListの仕組みと実装
yujisoftware
0
580
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
5
2.1k
Duckdb-Wasmでローカルダッシュボードを作ってみた
nkforwork
0
120
TypeScript Graph でコードレビューの心理的障壁を乗り越える
ysk8hori
2
1.1k
受け取る人から提供する人になるということ
little_rubyist
0
230

Featured

See All Featured
Facilitating Awesome Meetings
lara
50
6.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
The Cult of Friendly URLs
andyhume
78
6k
Done Done
chrislema
181
16k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Scaling GitHub
holman
458
140k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
Git: the NoSQL Database
bkeepers
PRO
427
64k
We Have a Design System, Now What?
morganepeng
50
7.2k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
A better future with KSS
kneath
238
17k

Transcript

  1. Web Components

  2. Who is this guy? nikgraf www.nikgraf.com [email protected] 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 [email protected] 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/