The Future of CSS with Web Components
2 likes392 views
This document discusses the future of CSS and web development with web components. It introduces some key concepts in web components like templates, shadow DOM, custom elements, and HTML imports. Templates allow creating hidden chunks of HTML, shadow DOM provides encapsulation for styling, custom elements define new HTML tags, and HTML imports bundle related scripts and styles. Web components aim to address issues with current frontend development approaches and enable more modular and reusable code with standards like templates, shadow DOM, and custom elements. Polyfills can provide support for these features in older browsers. Popular web component libraries include Polymer and Mozilla Brick which provide pre-built reusable elements.
![Shadow DOM w/ JS
[DEMO]](https://image.slidesharecdn.com/rxcarlp0rns7qpapou88-signature-e847456c6a6f52f4d0f0f7669a8f77f77a8ca5cc3daa63de0a00591556073525-poli-150518152319-lva1-app6891/85/The-Future-of-CSS-with-Web-Components-18-320.jpg)
![Insertions Points
[DEMO]](https://image.slidesharecdn.com/rxcarlp0rns7qpapou88-signature-e847456c6a6f52f4d0f0f7669a8f77f77a8ca5cc3daa63de0a00591556073525-poli-150518152319-lva1-app6891/85/The-Future-of-CSS-with-Web-Components-20-320.jpg)
![[DEMO]
Custom Elements](https://image.slidesharecdn.com/rxcarlp0rns7qpapou88-signature-e847456c6a6f52f4d0f0f7669a8f77f77a8ca5cc3daa63de0a00591556073525-poli-150518152319-lva1-app6891/85/The-Future-of-CSS-with-Web-Components-23-320.jpg)
![[DEMO]
HTML Imports](https://image.slidesharecdn.com/rxcarlp0rns7qpapou88-signature-e847456c6a6f52f4d0f0f7669a8f77f77a8ca5cc3daa63de0a00591556073525-poli-150518152319-lva1-app6891/85/The-Future-of-CSS-with-Web-Components-26-320.jpg)
![[DEMO]
Styling
{CSS}](https://image.slidesharecdn.com/rxcarlp0rns7qpapou88-signature-e847456c6a6f52f4d0f0f7669a8f77f77a8ca5cc3daa63de0a00591556073525-poli-150518152319-lva1-app6891/85/The-Future-of-CSS-with-Web-Components-31-320.jpg)
![‣ Shadow Piercing
Descendent Combinator (>>>)
Styling: Piercing
<style>
/* >>> was /deep/ */
video >>> input[type="range"] {
background: hotpink;
}
</style>](https://image.slidesharecdn.com/rxcarlp0rns7qpapou88-signature-e847456c6a6f52f4d0f0f7669a8f77f77a8ca5cc3daa63de0a00591556073525-poli-150518152319-lva1-app6891/85/The-Future-of-CSS-with-Web-Components-33-320.jpg)
The Future of CSS with Web Components
- 1. The Future of CSS With Web Components SETH ENGEN
- 2. ‣Computer Know How ‣18 years developing ‣User interface Who Am I?
- 3. Instead Of This… <style> #map-canvas { width: 500px; height: 400px; } </style> <script src="https://maps.googleapis.com/maps/api/js"></script> <script> function initialize() { var mapCanvas = document.getElementById('map-canvas'); var mapOptions = { center: new google.maps.LatLng(44.5403, -78.5463), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(mapCanvas, mapOptions) } google.maps.event.addDomListener(window, 'load', initialize); </script>
- 4. We Had This… <!-- Import element --> <link rel="import" href="google-map.html"> <!-- Use element --> <google-map latitude="44.852883" longitude="-93.242410"> </google-map>
- 5. ‣Bootstrap, Foundation, JQueryUI ‣HTML + CSS + JavaScript How We Do It Now…
- 6. “Frontend Paralysis” –Rob Dodson (Google)
- 7. ‣Templates ‣Shadow DOM ‣Custom Elements ‣HTML Imports Web Components
- 8. Templates
- 9. “They're a place to put a big wad of HTML that you don't want the browser to mess with at all...for any reason.” Rafael Weinstein (spec author)
- 10. ‣ Working w/ DOM ‣ Parsed; not rendered ‣ Hidden from document Templates document.querySelector(‘template h1') == null; <template> <h1>Template Awesomeness!</h1> </template>
- 11. Shadow DOM
- 12. ‣Subtree of DOM nodes ‣Create on any HTML element ‣Provides encapsulation Shadow DOM
- 13. ‣Shadow Host ‣Shadow Boundary ‣Shadow Root ‣Shadow Tree ‣Light DOM Shadow Tree Shadow DOM Shadow Host Shadow Root Child Shadow Root Child
- 14. Shadows = false
- 16. Shadows = true
- 17. Shadows Up Close
- 18. Shadow DOM w/ JS [DEMO]
- 21. Custom Elements
- 24. HTML Imports
- 25. ‣ Before ‣ After HTML Imports <link rel="import" href="bootstrap.html"> <link rel="stylesheet" href="bootstrap.css"> <link rel="stylesheet" href="fonts.css"> <script src="jquery.js"></script> <script src="bootstrap.js"></script> <script src="bootstrap-tooltip.js"></script> <script src="bootstrap-dropdown.js"></script>
- 27. Styling
- 30. ‣ Scoping ‣ Host ‣ Host (based on context) ‣ Piercing The Shadow Boundary Styling {CSS}
- 32. Styling: Host Context <style> :host-context(.theme1) { ... } :host-context(.theme2) { ... } </style> <body class="theme1"> ... </body>
- 33. ‣ Shadow Piercing Descendent Combinator (>>>) Styling: Piercing <style> /* >>> was /deep/ */ video >>> input[type="range"] { background: hotpink; } </style>
- 34. Browser Support Chrome Firefox IE 10+ Safari 8+ Chrome (Android) Safari (IOS) Template YES YES NO YES YES YES HTML Imports YES Flag NO NO YES NO Custom Elements YES Flag NO NO YES NO Shadow DOM YES Flag NO NO YES NO ‣ jonrimmer.github.io/are-we-componentized-yet ‣ caniuse.com
- 36. ‣ platform.js — webcomponents.js ‣ bower install webcomponentsjs ‣ npm install webcomponents.js ‣ github.com/webcomponents/webcomponentsjs Polyfill
- 37. Browser Support Chrome Firefox IE 10+ Safari 8+ Chrome (Android) Safari (IOS) Template YES YES YES YES YES YES HTML Imports YES YES YES YES YES YES Custom Elements YES YES YES YES YES YES Shadow DOM YES YES YES YES YES YES w/ Polyfill
- 38. ‣ Polymer by Google ‣ X-Tags by Mozilla Polyfill Libraries
- 39. Polymer Elements ‣ polymer-project.org/docs/elements ‣ <core-*> ‣ <paper-*>
- 41. Polymer Designer
- 42. Mozilla Brick (Elements) ‣ brick.mozilla.io ‣ <brick-*>
- 43. ‣ customelements.io ‣ component.kitchen More Web Components
- 44. ‣ googlewebcomponents.github.io Google Web Components
- 45. Thank you