Web Components

Borrador
Esta página no está completa.

Web Components constiste en distintas tecnologías independientes. Puedes pensar en Web Components como en widgets de interfaz de usuario reusables que son creados usando tecnología Web abierta. Son parte del navegador, y por lo tanto no necesitan bibliotecas externas como jQuery o Dojo. Un Web Component puede ser usado sin escribir código, simplemente añadiendo una sentencia para importarlo en una página HTML. Web Components usa capacidades estándar, nuevas o aún en desarrollo, del navegador.

Nota: Esta es una tecnología experimental. El navegador en el que la uses debe soprtar Web Components. Ver Habilitando Web Components en Firefox.

La descripción anterior funciona bastante bien en este momento, pero deja fuera muchas otras cosas para las que podrían crearse Web Components. Con Web Components, puedes hacer casi cualquier cosa que pueda ser hecha con HTML, CSS y JavaScript, y puede ser un componente portable que puede ser reutilizado fácilmente.

A veces hay confusión respecto a Web Components y Google Polymer. Polymer es un framework que está basado en las tecnologías Web Components. Puedes hacer y usar Web Components sin Polymer.

Web Components no están implementados completamente en todos los navegadores todavía, y por lo tanto para usarlos en la mayoría de navegadores (enero de 2015) probablemente necesitarás usar polyfills para rellenar los huecos en la cobertura de los navegadores. Hay disponibles polyfills en el proyecto Google Polymer . Para saber que navegadores implementan Web Components ver ¿Estamos Componentizados ya?

Web Components consiste en estas cuatro tecnologías (sin embargo cada una puede ser usada por separado):

La especificación de Web Components define los siguientes artículos:

Habilitando Web Components en Firefox

Las capacidades de Web Components están deshabilitadas por defecto en Firefox. Para habilitarlas, ve a la página about:config y descarta cualquier aviso que aparezca. Busca la preferencia llamada dom.webcomponents.enabled, y dale el valor true.

Firefox enable web components

Especificaciones

Especificación Estado Comentario
Custom Elements Working Draft  
WHATWG HTML Living Standard
The definition of 'template element' in that specification.
Living Standard Sin Cambio
HTML5
The definition of 'template element' in that specification.
Recommendation Definición inicial
Shadow DOM Working Draft  
HTML Imports Working Draft  
CSS Scoping Module Level 1 Working Draft  

Etiquetas y colaboradores del documento

 Colaboradores en esta página: Rodmore, maybe
 Última actualización por: Rodmore,