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.
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>
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