the future of css with web components
TRANSCRIPT
The Future of CSS With Web ComponentsSETH ENGEN
‣Computer Know How
‣18 years developing
‣User interface
Who Am I?
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>
We Had This…<!-- Import element --> <link rel="import" href="google-map.html">
<!-- Use element --> <google-map latitude="44.852883" longitude="-93.242410"> </google-map>
‣Bootstrap, Foundation, JQueryUI
‣HTML + CSS + JavaScript
How We Do It Now…
“Frontend Paralysis”–Rob Dodson (Google)
‣Templates
‣Shadow DOM
‣Custom Elements
‣HTML Imports
Web Components
Templates
“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)
‣ Working w/ DOM
‣ Parsed; not rendered
‣ Hidden from document
Templates
document.querySelector(‘template h1') == null;
<template> <h1>Template Awesomeness!</h1> </template>
Shadow DOM
‣Subtree of DOM nodes
‣Create on any HTML element
‣Provides encapsulation
Shadow DOM
‣Shadow Host
‣Shadow Boundary
‣Shadow Root
‣Shadow Tree
‣ Light DOMShadow Tree
Shadow DOMShadow
Host
Shadow Root Child
Shadow Root Child
Shadows = false
Dev Tools Settings
Shadows = true
Shadows Up Close
Shadow DOM w/ JS
[DEMO]
Insertions Points<content></content>
<content select='.first'></content>
Insertions Points
[DEMO]
Custom Elements
Custom Elements<name-tag>Seth</name-tag>
[DEMO]
Custom Elements
HTML Imports
‣ 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>
[DEMO]
HTML Imports
Styling
Shadow Boundary
CSS
Shadow Boundary
Shadow Boundary
CSS
‣ Scoping
‣ Host
‣ Host (based on context)
‣ Piercing The Shadow Boundary
Styling
{CSS}
[DEMO]
Styling
{CSS}
Styling: Host Context<style> :host-context(.theme1) { ... }
:host-context(.theme2) { ... } </style>
<body class="theme1"> ... </body>
‣ Shadow PiercingDescendent Combinator (>>>)
Styling: Piercing
<style> /* >>> was /deep/ */ video >>> input[type="range"] { background: hotpink; } </style>
Browser SupportChrome 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
‣ platform.js — webcomponents.js ‣ bower install webcomponentsjs
‣ npm install webcomponents.js
‣ github.com/webcomponents/webcomponentsjs
Polyfill
Browser SupportChrome 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
‣ Polymer by Google
‣ X-Tags by Mozilla
Polyfill Libraries
Polymer Elements‣ polymer-project.org/docs/elements
‣ <core-*>
‣ <paper-*>
Polymer Designer
Mozilla Brick (Elements)‣ brick.mozilla.io
‣ <brick-*>
‣ customelements.io
‣ component.kitchen
More Web Components
‣ googlewebcomponents.github.io
Google Web Components
Thank you