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
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
510
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
400
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
490
Cache Me If You Can
ryunen344
2
650
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
310
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
640
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
520
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
130
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
Rancher と Terraform
fufuhu
2
240
旅行プランAIエージェント開発の裏側
ippo012
2
890
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Automating Front-end Workflow
addyosmani
1370
200k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Embracing the Ebb and Flow
colly
87
4.8k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Code Reviewing Like a Champion
maltzj
525
40k
Balancing Empowerment & Direction
lara
3
620
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
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