Download as PDF, PPTX
![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)
Uploaded byColdFusionConference
The Future of CSS with Web Components
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.
More Related Content
Similar to The Future of CSS with Web Components
The Future of CSS with Web Components
- 1. The Future ofCSS With Web Components SETH ENGEN
- 2. ‣Computer Know How ‣18years 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 ‣HTMLImports Web Components
- 8.
- 9. “They're a placeto 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.
- 12. ‣Subtree of DOMnodes ‣Create on any HTML element ‣Provides encapsulation Shadow DOM
- 13. ‣Shadow Host ‣Shadow Boundary ‣ShadowRoot ‣Shadow Tree ‣Light DOM Shadow Tree Shadow DOM Shadow Host Shadow Root Child Shadow Root Child
- 14.
- 15.
- 16.
- 17.
- 18. Shadow DOM w/JS [DEMO]
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25. ‣ Before ‣ After HTMLImports <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>
- 26.
- 27.
- 28.
- 29.
- 30. ‣ Scoping ‣ Host ‣Host (based on context) ‣ Piercing The Shadow Boundary Styling {CSS}
- 31.
- 32. Styling: Host Context <style> :host-context(.theme1){ ... } :host-context(.theme2) { ... } </style> <body class="theme1"> ... </body>
- 33. ‣ Shadow Piercing DescendentCombinator (>>>) Styling: Piercing <style> /* >>> was /deep/ */ video >>> input[type="range"] { background: hotpink; } </style>
- 34. Browser Support Chrome FirefoxIE 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
- 35.
- 36. ‣ platform.js —webcomponents.js ‣ bower install webcomponentsjs ‣ npm install webcomponents.js ‣ github.com/webcomponents/webcomponentsjs Polyfill
- 37. Browser Support Chrome FirefoxIE 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 byGoogle ‣ X-Tags by Mozilla Polyfill Libraries
- 39. Polymer Elements ‣ polymer-project.org/docs/elements ‣<core-*> ‣ <paper-*>
- 40.
- 41.
- 42. Mozilla Brick (Elements) ‣brick.mozilla.io ‣ <brick-*>
- 43. ‣ customelements.io ‣ component.kitchen MoreWeb Components
- 44.
- 45.