Download to read offline
Uploaded byPeter Gasston
Web Components: What, Why, How, and When
The document discusses web components, including what they are (a suite of technologies for making reusable UI controls), why they are important (to improve on past solutions like jQuery plugins), and how they work (using concepts like custom elements, shadow DOM, and templates). It also covers browser support for different web component specifications and encourages developers to help drive the future of the web responsibly with web components.
More Related Content
Similar to Web Components: What, Why, How, and When
Web Components: What, Why, How, and When
- 1. @stopsatgreen WEB COMPONENTS What, Why, How, When #LWSROOTS, 24/11
- 2. @stopsatgreen @stopsatgreen PeterGasston broken-links.com
- 3.
- 4. @stopsatgreen ‘Demeaning’ ‘Condescending’ ‘A bit silly’
- 5.
- 6.
- 7.
- 8. @stopsatgreen “The componentmodel for the Web.”
- 9. @stopsatgreen A suiteof technologies for making reusable UI controls or services.
- 10. @stopsatgreen Fundamental changeto the way we build the Web.
- 11.
- 12.
- 13.
- 14. ® The LegoGroup @stopsatgreen
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22. @stopsatgreen Java Applets Dynamic Drive OOCSS BEM jQuery UI Bootstrap React Ember Web Components
- 23.
- 24.
- 25. @stopsatgreen • jQuery: querySelector(), classList • Modernizr : @supports • Sass : --custom-properties()
- 26.
- 27. @stopsatgreen <flex-carousel> <prev-next> <open-lightbox> <show-position>
- 28.
- 29.
- 30.
- 31.
- 32. @stopsatgreen meaningful naming + modularisation + encapsulation + sharing = web components
- 33.
- 34.
- 35. @stopsatgreen proto =Object.create(HTMLElement.prototype); proto.whip = function(…); document.registerElement('indiana-jones', { prototype: proto }); indy = document.querySelector('indiana-jones'); indy.whip();
- 36. @stopsatgreen <button is="indiana-jones"></button> proto = Object.create(HTMLButtonElement.prototype); proto.whip = function(…); document.registerElement('indiana-jones', { prototype: proto, extends: 'button' });
- 37.
- 38.
- 39. @stopsatgreen var root= foo.createShadowRoot(); root.innerHTML = '<div>…</div>';
- 40. @stopsatgreen <indiana-jones> <templateid="doom">…</template> <script>…</script> </indiana-jones>
- 41. @stopsatgreen <link rel="import"href="button-super.htm">
- 42.
- 43. <leaf-map lat="33.9186805" lon="8.1198406"></leaf-map> @stopsatgreen <link rel="import" href="leaflet-map.htm">
- 44. @stopsatgreen Everything Useful Useful & well-made Crap http://en.wikipedia.org/wiki/Sturgeon%27s_law
- 45.
- 46.
- 47.
- 48.
- 49.
- 50. @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">
- 51.
- 52. Browser Custom ElementsShadow DOM HTML Imports Template @stopsatgreen ✓ ✓ ✓ ✓ ✓ ✓ Who knows? ‘Under consideration’ ✓ ✓ ✓ http://jonrimmer.github.io/are-we-componentized-yet/
- 53.
- 54. Polymer Core Bosonic Platform.js (polyfill) Core Elements Brick Paper Elements Elements Standard polymer-project.org | brick.mozilla.io | bosonic.github.io | webcomponents.org
- 55. @stopsatgreen Web Componentsare for you to drive the future of the web. Please drive responsibly.
- 56.
- 57. @stopsatgreen Unless otherwisestated, all photos in this deck are copyright George Lucas or Mickey Mouse or someone and used without permission.