the future of css with web components
TRANSCRIPT
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>
“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 Host
‣Shadow Boundary
‣Shadow Root
‣Shadow Tree
‣ Light DOMShadow Tree
Shadow DOMShadow
Host
Shadow Root Child
Shadow Root Child
‣ 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>
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
‣ customelements.io
‣ component.kitchen
More Web Components