web components: what, why, how, and when
TRANSCRIPT
![Page 1: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/1.jpg)
@stopsatgreen
WEB COMPONENTS What, Why, How, When
#LWSROOTS, 24/11
![Page 2: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/2.jpg)
@stopsatgreen
@stopsatgreen Peter Gasston
broken-links.com
![Page 3: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/3.jpg)
@stopsatgreen
WEB COMPONENTS
![Page 4: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/4.jpg)
@stopsatgreen
‘Demeaning’‘Condescending’
‘A bit silly’
![Page 5: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/5.jpg)
@stopsatgreen
![Page 6: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/6.jpg)
@stopsatgreen
![Page 7: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/7.jpg)
@stopsatgreen
WHAT?
![Page 8: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/8.jpg)
@stopsatgreen
“The component model for the Web.”
![Page 9: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/9.jpg)
@stopsatgreen
A suite of technologies for making reusable UI controls or services.
![Page 10: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/10.jpg)
@stopsatgreen
Fundamental change to the way we build the Web.
![Page 11: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/11.jpg)
@stopsatgreen
![Page 12: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/12.jpg)
@stopsatgreen
![Page 13: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/13.jpg)
@stopsatgreen
![Page 14: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/14.jpg)
@stopsatgreen® The Lego Group
![Page 15: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/15.jpg)
@stopsatgreen
Custom Elements
![Page 16: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/16.jpg)
@stopsatgreen
Shadow DOM
![Page 17: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/17.jpg)
@stopsatgreen
HTML Imports
![Page 18: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/18.jpg)
@stopsatgreen
![Page 19: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/19.jpg)
@stopsatgreen
Templates
![Page 20: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/20.jpg)
@stopsatgreen
WHY?
![Page 21: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/21.jpg)
@stopsatgreen
![Page 22: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/22.jpg)
@stopsatgreen
OOCSS BEM
Java Applets Dynamic Drive
React Ember
jQuery UI Bootstrap
Web Components
![Page 23: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/23.jpg)
@stopsatgreen
W3C WHATWG
![Page 24: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/24.jpg)
@stopsatgreen
![Page 25: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/25.jpg)
@stopsatgreen
• jQuery : querySelector(), classList • Modernizr : @supports • Sass : --custom-properties()
![Page 26: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/26.jpg)
@stopsatgreen
#extendthewebforward
http://extensiblewebmanifesto.org/
![Page 27: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/27.jpg)
@stopsatgreen
<flex-carousel>
<prev-next><show-position>
<open-lightbox>
![Page 28: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/28.jpg)
@stopsatgreenhttp://msdn.microsoft.com/library/ie/ms531426.aspx
![Page 29: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/29.jpg)
@stopsatgreen
![Page 30: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/30.jpg)
@stopsatgreen
![Page 31: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/31.jpg)
@stopsatgreen
![Page 32: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/32.jpg)
@stopsatgreen
meaningful naming + modularisation + encapsulation + sharing = web components
![Page 33: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/33.jpg)
@stopsatgreen
HOW?
![Page 34: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/34.jpg)
@stopsatgreen
<indiana-jones></indiana-jones>
document.registerElement('indiana-jones');
![Page 35: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/35.jpg)
@stopsatgreen
proto = Object.create(HTMLElement.prototype); proto.whip = function(…); document.registerElement('indiana-jones', { prototype: proto });
indy = document.querySelector('indiana-jones');indy.whip();
![Page 36: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/36.jpg)
@stopsatgreen
<button is="indiana-jones"></button>
proto = Object.create(HTMLButtonElement.prototype); proto.whip = function(…); document.registerElement('indiana-jones', { prototype: proto, extends: 'button' });
![Page 37: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/37.jpg)
@stopsatgreen
![Page 38: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/38.jpg)
@stopsatgreen
![Page 39: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/39.jpg)
@stopsatgreen
var root = foo.createShadowRoot(); root.innerHTML = '<div>…</div>';
![Page 40: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/40.jpg)
@stopsatgreen
<indiana-jones> <template id="doom">…</template> <script>…</script></indiana-jones>
![Page 41: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/41.jpg)
@stopsatgreen
<link rel="import" href="button-super.htm">
![Page 43: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/43.jpg)
@stopsatgreen
<leaf-map lat="33.9186805" lon="8.1198406"></leaf-map>
<link rel="import" href="leaflet-map.htm">
![Page 44: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/44.jpg)
@stopsatgreen
Everything
Useful
Useful & well-made Crap
http://en.wikipedia.org/wiki/Sturgeon%27s_law
![Page 46: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/46.jpg)
@stopsatgreenhttp://www.paciellogroup.com/blog/2014/09/web-components-punch-list/
![Page 47: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/47.jpg)
@stopsatgreen
![Page 48: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/48.jpg)
@stopsatgreen
![Page 49: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/49.jpg)
@stopsatgreen
/path/to/library.min.js /path/to/a/library.min.js
![Page 50: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/50.jpg)
@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">
![Page 51: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/51.jpg)
@stopsatgreen
WHEN?
![Page 52: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/52.jpg)
@stopsatgreen
Browser Custom Elements Shadow DOM HTML Imports Template
Who knows?
‘Under consideration’
✓ ✓ ✓ ✓ ✓ ✓
✓ ✓ ✓
http://jonrimmer.github.io/are-we-componentized-yet/
![Page 53: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/53.jpg)
@stopsatgreen
![Page 54: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/54.jpg)
Platform.js (polyfill)
Polymer Core Bosonic
Core Elements
Brick
Paper Elements
Elements
polymer-project.org | brick.mozilla.io | bosonic.github.io | webcomponents.org
Standard
![Page 55: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/55.jpg)
@stopsatgreen
Web Components are for you to drive the future of the web.
Please drive responsibly.
![Page 56: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/56.jpg)
@stopsatgreen
THE END
![Page 57: Web Components: What, Why, How, and When](https://reader038.vdocuments.site/reader038/viewer/2022110310/55a1b6cf1a28abec398b4609/html5/thumbnails/57.jpg)
@stopsatgreen
Unless otherwise stated, all photos in this deck are copyright George Lucas or Mickey Mouse or
someone and used without permission.