Los web components son una forma que tenemos ahora de encapsular código en un tag personalizado, es decir, que dentro de ese tag que nosotros creamos, pueden existir varias líneas de código por detrás y gracias a esas líneas de código, ese tag se comportara de cierta manera.
HTML nos proporciona un conjunto de elementos como <button>, <video>, <audio> que al momento de que nosotros los usamos, parece que simplemente aparecen, cuando en realidad hay un montón de código por detrás haciendo que esa etiqueta cumpla su función, lamentablemente estas etiquetas son limitadas, simples y para que realmente se comporten o vean bien, tenemos que mover el HTML o CSS.
Los web components son increíbles ya que nuestro HTML se ve mucho más limpio y mejor estructurado, nuestros ojos ya no tienen que sufrir viendo un montón de etiquetas una de tras de otra, ocasionando confusiones dentro del código.
Pasamos de tener esto:
<style>
#map_canvas {
width: 500px;
height: 400px;
}
</style>
<body>
<div id="map_canvas"></div>
</body>
<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(37.77493, --122.41942),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
A tener lo siguiente:
<style>
google-map {
height: 600px;
}
</style>
<google-map latitude="37.77493" longitude="-122.41942"></google-map>
Esto no solo hace que el código se vea más limpio y fácil de usar, si no, que de igual manera estamos reutilizando los elementos.
Algunos ejemplos
Si aún no quedas convencido del todo, tal vez los Google web components te puedan convencer.
Google tiene varios web components de sus APIs más utilizadas y que ahora mismo puedes estar usando, gracias a esta facilidad que nos da Google ya no es necesario estar moviendo montones de código JavaScript.
Google Analytics:
<google-analytics-query
ids="ga:1174"
metrics="ga:sessions"
dimensions="ga:country"
sort="-ga:sessions"
maxResults="5">
</google-analytics-query>
Instalación:
bower install GoogleWebComponents/google-analytics [--save]
Google Chart:
<google-chart
type='pie'
options='{"title": "Distribution of days in 2001Q1"}'
cols='[{"label":"Month", "type":"string"}, {"label":"Days", "type":"number"}]'
rows='[["Jan", 31],["Feb", 28],["Mar", 31]]'>
</google-chart>
Instalación:
bower install GoogleWebComponents/google-chart [--save]
Youtube:
<google-youtube
video-id="..."
height="270px"
width="480px"
rel="0"
start="5"
autoplay="1">
</google-youtube>
Instalación:
bower install GoogleWebComponents/google-youtube [--save]
Si quieres ver la lista completa de los Google web components y ver como funcionan, puedes dar click aquí.
Compatibilidad
Actualmente solo Chrome y Opera aceptan todas las características de los web components, mientras tanto Firefox, Safari e Internet Explorer no los soportan del todo.
Por suerte tenemos algo llamado polyfills que nos permiten usar todas estas tecnologías en navegadores viejos (IE 10+).