Web Components: What, Why, How, and When
0 likes581 views
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.
Web Components: What, Why, How, and When
- 1. @stopsatgreen WEB COMPONENTS What, Why, How, When #LWSROOTS, 24/11
- 2. @stopsatgreen @stopsatgreen Peter Gasston broken-links.com
- 4. @stopsatgreen ‘Demeaning’ ‘Condescending’ ‘A bit silly’
- 8. @stopsatgreen “The component model for the Web.”
- 9. @stopsatgreen A suite of technologies for making reusable UI controls or services.
- 10. @stopsatgreen Fundamental change to the way we build the Web.
- 11. @stopsatgreen
- 12. @stopsatgreen
- 13. @stopsatgreen
- 14. ® The Lego Group @stopsatgreen
- 18. @stopsatgreen
- 21. @stopsatgreen
- 22. @stopsatgreen Java Applets Dynamic Drive OOCSS BEM jQuery UI Bootstrap React Ember Web Components
- 24. @stopsatgreen
- 25. @stopsatgreen • jQuery : querySelector(), classList • Modernizr : @supports • Sass : --custom-properties()
- 27. @stopsatgreen <flex-carousel> <prev-next> <open-lightbox> <show-position>
- 29. @stopsatgreen
- 30. @stopsatgreen
- 31. @stopsatgreen
- 32. @stopsatgreen meaningful naming + modularisation + encapsulation + sharing = web components
- 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. @stopsatgreen
- 38. @stopsatgreen
- 39. @stopsatgreen var root = foo.createShadowRoot(); root.innerHTML = '<div>…</div>';
- 40. @stopsatgreen <indiana-jones> <template id="doom">…</template> <script>…</script> </indiana-jones>
- 41. @stopsatgreen <link rel="import" href="button-super.htm">
- 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
- 46. http://www.paciellogroup.com/blog/2014/09/web-components-punch-list/ @stopsatgreen
- 47. @stopsatgreen
- 48. @stopsatgreen
- 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">
- 52. Browser Custom Elements Shadow DOM HTML Imports Template @stopsatgreen ✓ ✓ ✓ ✓ ✓ ✓ Who knows? ‘Under consideration’ ✓ ✓ ✓ http://jonrimmer.github.io/are-we-componentized-yet/
- 53. @stopsatgreen
- 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 Components are for you to drive the future of the web. Please drive responsibly.
- 57. @stopsatgreen Unless otherwise stated, all photos in this deck are copyright George Lucas or Mickey Mouse or someone and used without permission.