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: Where we are now, and what’s next?
Search
Peter Gasston
June 19, 2015
Technology
1
190
Web Components: Where we are now, and what’s next?
Responsive Day Out, 19/06/15.
Peter Gasston
June 19, 2015
Tweet
Share
More Decks by Peter Gasston
See All by Peter Gasston
People Don’t Change
stopsatgreen
0
130
Your Reality Here
stopsatgreen
0
80
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
310
Growing Up, Getting Serious
stopsatgreen
0
70
Surveying the Landscape — November 2016
stopsatgreen
1
140
Surveying the Landscape - Fronteers
stopsatgreen
2
450
The Web vs. The Browser
stopsatgreen
0
150
Surveying the Landscape Sept. 2016
stopsatgreen
1
280
Surveying the Landscape
stopsatgreen
4
740
Other Decks in Technology
See All in Technology
20250129 Findy_テスト高活用化
dshirae
0
240
パフォーマンスとコスト改善のために法人データ分析基盤をBigQueryに移行した話
seiya303
1
110
Oracle Cloud Infrastructure:2025年1月度サービス・アップデート
oracle4engineer
PRO
0
370
DeepSeek on AWS
hariby
1
190
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
450
ゆもつよがこの30年間自ら経験してきたQA、テストの歴史と未来
ymty
3
470
The 5 Obstacles to Empowered Teams - Twice the Value in Half the Time
mdalmijn
0
190
例外処理を理解して、設計段階からエラーを「見つけやすく」「起こりにくく」する
kajitack
13
4.3k
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
170
SCSAから学ぶセキュリティ管理
masakamayama
0
130
Amazon Location Serviceを使ってラーメンマップを作る
ryder472
2
170
GraphRAG: What I Thought I Knew (But Didn’t)
sashimimochi
1
260
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1030
460k
YesSQL, Process and Tooling at Scale
rocio
171
14k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Facilitating Awesome Meetings
lara
51
6.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.5k
We Have a Design System, Now What?
morganepeng
51
7.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Transcript
@stopsatgreen Web Components: where we are now, and what next?
Responsive Day Out 19/06/15
@stopsatgreen Peter Gasston @stopsatgreen broken-links.com
@stopsatgreen For the designers.
@stopsatgreen Web Components have been around for a while.
@stopsatgreen In a trough on the hype cycle.
@stopsatgreen Everybody’s in… but that means trouble.
@stopsatgreen Web Components enable us to create widgets. CSS JS
Widget Widget Widget
@stopsatgreen Composable, reusable, encapsulated. CSS JS Widget Widget Widget
@stopsatgreen We run things, things don’t run we, don’t take
nothing from nobody.
@stopsatgreen React, BEM, etc. are ways of doing this using
the technologies of today.
@stopsatgreen The Extensible Web Manifesto. extensiblewebmanifesto.org <picture> <source srcset="foo.png" media="(min-width:
600px)"> <img src="bar.png" alt="Logo"> </picture>
@stopsatgreen Web Components are: Templates, HTML Imports, Custom Elements, Shadow
DOM.
@stopsatgreen Templates. Reusable fragments of inert HTML.
@stopsatgreen <script type="text/x-tmpl-mustache"> … </script> <template>…</template>
@stopsatgreen Templates. OK to use, with fallback for IE/Edge.
@stopsatgreen HTML Imports. Include HTML documents in an HTML document.
@stopsatgreen <link rel="import" href="file.html"> // file.js export foo; // page.js
import foo from "file.js";
@stopsatgreen HTML Imports. Will probably be replaced by ES6 modules.
@stopsatgreen Shadow DOM. Hide complex markup inside an element.
@stopsatgreen root = el.createShadowRoot({ mode: 'open' }); root.innerHTML = '<div>…</div>';
@stopsatgreen Shadow DOM is very hard to polyfill.
@stopsatgreen Shadow DOM. Lots still to be defined.
@stopsatgreen Custom Elements. Meaningful markup with bespoke properties.
@stopsatgreen <fun-times></fun-times> document.registerElement('fun-times');
@stopsatgreen <fun-times> = HTMLElement <funtimes> = HTMLUnknownElement document.registerElement('fun-times'); <fun-times> =
fun-times
@stopsatgreen fTs = document.querySelector('fun-times'); fTs.hooray(); p = Object.create(HTMLElement.prototype); p.hooray =
function() {…}; document.registerElement('fun-times', { prototype: p });
@stopsatgreen // ES6 approach (not final) class fTs extends HTMLElement
{…} document.registerElement('fun-times', fTs); ES6 offers a better way to do this.
@stopsatgreen Custom Elements. Approach is sound, some details to finalise.
@stopsatgreen is A major sticking point.
@stopsatgreen p = Object.create(HTMLButtonElement.prototype); document.registerElement('fun-times', { prototype: p, extends: 'button'
}); <button is="fun-times"></button>
@stopsatgreen is isn’t (probably)
@stopsatgreen In summary: welcome to the trough of disillusionment.
@stopsatgreen A tour of the sausage factory.
@stopsatgreen This is our big opportunity. We need to get
this right.
@stopsatgreen A11y, usability, SEO, etc, become our responsibility.
@stopsatgreen Sturgeon’s Revelation: 90% of everything is crap.
@stopsatgreen The Gold Standard. github.com/webcomponents/gold-standard/wiki
@stopsatgreen Loading, DOM Presence, Content, Interaction, API, Styling, Performance, Localisation,
Factoring, Development.
@stopsatgreen Unix philosophy: every component does one job.
@stopsatgreen Learn a library first, then vanilla.
@stopsatgreen
@stopsatgreen Everybody’s in. but that means trouble. …
@stopsatgreen Cheers.
@stopsatgreen Reading list: • webcomponents.org/articles/why-web-components/ • hacks.mozilla.org/2015/06/the-state-of-web-components/ • aerotwist.com/blog/polymer-for-the-performance-obsessed/ •
tjvantoll.com/speaking/slides/Web-Components-Catch/San-Francisco/ web-components-catch.pdf • w3.org/2015/04/24-webapps-minutes.html • … and many, many more.