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
Web Components: What, Why, How, When
Search
Peter Gasston
March 04, 2015
Programming
2
120
Web Components: What, Why, How, When
Revised and updated version of an older talk, presented at the Web Components London meetup.
Peter Gasston
March 04, 2015
Tweet
Share
More Decks by Peter Gasston
See All by Peter Gasston
People Don’t Change
stopsatgreen
0
150
Your Reality Here
stopsatgreen
0
92
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
340
Growing Up, Getting Serious
stopsatgreen
0
86
Surveying the Landscape — November 2016
stopsatgreen
1
160
Surveying the Landscape - Fronteers
stopsatgreen
2
480
The Web vs. The Browser
stopsatgreen
0
190
Surveying the Landscape Sept. 2016
stopsatgreen
1
380
Surveying the Landscape
stopsatgreen
4
830
Other Decks in Programming
See All in Programming
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
150
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
110
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
270
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
520
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
190
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
490
今から始めるClaude Code入門〜AIコーディングエージェントの歴史と導入〜
nokomoro3
0
150
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
510
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.2k
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
140
AIでLINEスタンプを作ってみた
eycjur
1
230
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.7k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
A designer walks into a library…
pauljervisheath
207
24k
Context Engineering - Making Every Token Count
addyosmani
2
41
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
How GitHub (no longer) Works
holman
315
140k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Transcript
@stopsatgreen WEB COMPONENTS What, Why, How, When #WCLDN, 04/03
@stopsatgreen @stopsatgreen Peter Gasston broken-links.com
@stopsatgreen WEB COMPONENTS
@stopsatgreen http://en.wikipedia.org/wiki/H%C3%A9lio_Oiticica
@stopsatgreen
@stopsatgreen WHAT?
@stopsatgreen “The component model for the Web.”
@stopsatgreen A suite of technologies for making reusable UI controls
or services.
@stopsatgreen Fundamental change to the way we build the Web.
@stopsatgreen
@stopsatgreen
@stopsatgreen
@stopsatgreen ® The Lego Group
@stopsatgreen Custom Elements + Shadow DOM + HTML Imports +
Templates = Web Components
@stopsatgreen WHY?
@stopsatgreen
@stopsatgreen OOCSS BEM Java Applets Dynamic Drive React Ember jQuery
UI Bootstrap Web Components
@stopsatgreen W3C WHATWG
@stopsatgreen
@stopsatgreen • jQuery : querySelector(), classList • Modernizr : @supports
• Sass : --custom-properties()
@stopsatgreen Let us make the tools we need.
@stopsatgreen #extendthewebforward http://extensiblewebmanifesto.org/
@stopsatgreen <flex-carousel> <prev-next> <show-position> <open-lightbox>
@stopsatgreen http://msdn.microsoft.com/library/ie/ms531426.aspx
@stopsatgreen
@stopsatgreen
@stopsatgreen
@stopsatgreen meaningful naming + modularisation + encapsulation + sharing =
web components
@stopsatgreen HOW?
@stopsatgreen Custom Elements
@stopsatgreen <fun-times></fun-times> document.registerElement('fun-times');
@stopsatgreen <fun-times></fun-times> = HTMLElement <funtimes></funtimes> = HTMLUnknownElement
@stopsatgreen fun-times:unresolved {…}
@stopsatgreen proto = Object.create(HTMLElement.prototype); proto.hooray = function() {…}; document.registerElement('fun-times', {
prototype: proto }); funTimes = document.querySelector('fun-times'); funTimes.hooray();
@stopsatgreen proto = Object.create(HTMLElement.prototype); proto.createdCallback = function() {…}; document.registerElement('fun-times', {
prototype: proto });
@stopsatgreen <button is="fun-times"></button> proto = Object.create(HTMLButtonElement.prototype); proto.hooray = function() {…};
document.registerElement('fun-times', { prototype: proto, extends: 'button' });
@stopsatgreen Shadow DOM
@stopsatgreen
@stopsatgreen
@stopsatgreen var root = foo.createShadowRoot(); root.innerHTML = '<div>…</div>';
@stopsatgreen Templates
@stopsatgreen <template id="party">…</template> var party = document.getElementById('party'); var partyContent =
party.content;
@stopsatgreen var funTimes = document.querySelector('fun-times'); var proto = Object.create(HTMLElement.prototype); proto.hooray
= function() {…}; proto.createdCallback = function() { var party = document.getElementById('party'); var clone = document.importNode(party.content,true); var root = funTimes.createShadowRoot(); root.appendChild(clone); } document.registerElement('fun-times', { prototype: proto });
@stopsatgreen HTML Imports
@stopsatgreen <link rel="import" href="fun-times.htm">
@stopsatgreen http://leafletjs.com/
@stopsatgreen <leaf-map lat="33.9186805" lon="8.1198406"></leaf-map> <link rel="import" href="leaflet-map.htm">
@stopsatgreen But it’s not all rosy.
@stopsatgreen The is="" pattern. https://lists.w3.org/Archives/Public/public-webapps/2015JanMar/0206.html
@stopsatgreen <button is="fun-times"></button> <h1 is="h-7"></h1> <iframe is="new-button"></iframe>
@stopsatgreen document.registerElement('fun-times'); var funRoot = funTimes.createShadowRoot(); funRoot.innerHTML = '<button>…</button>';
@stopsatgreen HTML Imports have huge potential for performance problems…
@stopsatgreen /path/to/library.min.js /path/to/a/library.min.js
@stopsatgreen <link rel="import" href="//foo.com/btn-a.htm"> <link rel="import" href="//bar.com/btn-b.htm"> <link rel="import" href="//baz.com/btn-c.htm">
@stopsatgreen … so Firefox won’t implement.
@stopsatgreen WHEN?
@stopsatgreen Browser Custom Elements Shadow DOM HTML Imports Template Who
knows? ‘Under consideration’ ✓ ✓ ✓ ✓ ✓ ✗ ✓ ✓ ✓ http://jonrimmer.github.io/are-we-componentized-yet/
@stopsatgreen Web Components will happen. Maybe not in this form,
but the concept is solid.
@stopsatgreen
webcomponents.js (polyfills) Polymer Core Bosonic Core Elements Brick Paper Elements
Elements polymer-project.org | brick.mozilla.io | bosonic.github.io | webcomponents.org Standard
@stopsatgreen Web Components vs. React (etc)
@stopsatgreen Everything Useful Useful & well-made Crap http://en.wikipedia.org/wiki/Sturgeon%27s_law
@stopsatgreen Sturgeon’s Law: 90% of everything is crap
@stopsatgreen http://addyosmani.com/first/
@stopsatgreen http://www.paciellogroup.com/blog/2014/09/web-components-punch-list/
@stopsatgreen Web Components are for you to drive the future
of the web. Please drive responsibly.
@stopsatgreen THE END