Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a The Future of CSS with Web components
Similar a The Future of CSS with Web components (20)
Más de devObjective
Más de devObjective (20)
Último
Último (20)
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