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
November 24, 2014
Technology
0
70
Web Components: What, Why, How, When
Given at #lwsroots, 24th November 2014.
Peter Gasston
November 24, 2014
Tweet
Share
More Decks by Peter Gasston
See All by Peter Gasston
People Don’t Change
stopsatgreen
0
140
Your Reality Here
stopsatgreen
0
81
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
320
Growing Up, Getting Serious
stopsatgreen
0
72
Surveying the Landscape — November 2016
stopsatgreen
1
140
Surveying the Landscape - Fronteers
stopsatgreen
2
450
The Web vs. The Browser
stopsatgreen
0
160
Surveying the Landscape Sept. 2016
stopsatgreen
1
290
Surveying the Landscape
stopsatgreen
4
750
Other Decks in Technology
See All in Technology
脳波を用いた嗜好マッチングシステム
hokkey621
0
170
AI エージェント開発を支える MaaS としての Azure AI Foundry
ryohtaka
6
640
2024.02.19 W&B AIエージェントLT会 / AIエージェントが業務を代行するための計画と実行 / Algomatic 宮脇
smiyawaki0820
15
4.1k
開発組織のための セキュアコーディング研修の始め方
flatt_security
3
2.7k
わたしのOSS活動
kazupon
2
300
OpenID BizDay#17 KYC WG活動報告(法人) / 20250219-BizDay17-KYC-legalidentity
oidfj
0
370
AIエージェント元年
shukob
0
120
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
1
1.5k
速くて安いWebサイトを作る
nishiharatsubasa
14
15k
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
9
1.7k
Oracle Cloud Infrastructure:2025年2月度サービス・アップデート
oracle4engineer
PRO
1
340
生成 AI プロダクトを育てる技術 〜データ品質向上による継続的な価値創出の実践〜
icoxfog417
PRO
5
1.8k
Featured
See All Featured
Designing for Performance
lara
604
68k
The Invisible Side of Design
smashingmag
299
50k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Documentation Writing (for coders)
carmenintech
67
4.6k
Code Reviewing Like a Champion
maltzj
521
39k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Building Applications with DynamoDB
mza
93
6.2k
Producing Creativity
orderedlist
PRO
344
39k
Facilitating Awesome Meetings
lara
52
6.2k
For a Future-Friendly Web
brad_frost
176
9.5k
Transcript
@stopsatgreen WEB COMPONENTS What, Why, How, When #LWSROOTS, 24/11
@stopsatgreen @stopsatgreen Peter Gasston broken-links.com
@stopsatgreen WEB COMPONENTS
@stopsatgreen ‘Demeaning’ ‘Condescending’ ‘A bit silly’
@stopsatgreen
@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
@stopsatgreen Shadow DOM
@stopsatgreen HTML Imports
@stopsatgreen
@stopsatgreen Templates
@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 #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 <indiana-jones></indiana-jones> document.registerElement('indiana-jones');
@stopsatgreen proto = Object.create(HTMLElement.prototype); proto.whip = function(…); document.registerElement('indiana-jones', { prototype:
proto }); indy = document.querySelector('indiana-jones'); indy.whip();
@stopsatgreen <button is="indiana-jones"></button> proto = Object.create(HTMLButtonElement.prototype); proto.whip = function(…); document.registerElement('indiana-jones',
{ prototype: proto, extends: 'button' });
@stopsatgreen
@stopsatgreen
@stopsatgreen var root = foo.createShadowRoot(); root.innerHTML = '<div>…</div>';
@stopsatgreen <indiana-jones> <template id="doom">…</template> <script>…</script> </indiana-jones>
@stopsatgreen <link rel="import" href="button-super.htm">
@stopsatgreen http://leafletjs.com/
@stopsatgreen <leaf-map lat="33.9186805" lon="8.1198406"></leaf-map> <link rel="import" href="leaflet-map.htm">
@stopsatgreen Everything Useful Useful & well-made Crap http://en.wikipedia.org/wiki/Sturgeon%27s_law
@stopsatgreen http://addyosmani.com/first/
@stopsatgreen http://www.paciellogroup.com/blog/2014/09/web-components-punch-list/
@stopsatgreen
@stopsatgreen
@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 WHEN?
@stopsatgreen Browser Custom Elements Shadow DOM HTML Imports Template Who
knows? ‘Under consideration’ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ http://jonrimmer.github.io/are-we-componentized-yet/
@stopsatgreen
Platform.js (polyfill) Polymer Core Bosonic Core Elements Brick Paper Elements
Elements polymer-project.org | brick.mozilla.io | bosonic.github.io | webcomponents.org Standard
@stopsatgreen Web Components are for you to drive the future
of the web. Please drive responsibly.
@stopsatgreen THE END
@stopsatgreen Unless otherwise stated, all photos in this deck are
copyright George Lucas or Mickey Mouse or someone and used without permission.