.. role:: problema-contador Componentes web =============== Los componentes web son un conjunto de estándares que facilitan la reutilización de los elementos que se suelen definir en una aplicación web. La tecnología de los componentes web se basa en dos elementos estandarizados principales: el *DOM ensombrecido* (*shadow DOM*), que permite modificar la presentación de una parte de la página web sin modificar el DOM global (o *DOM iluminado*, *light DOM*, nombre que se ha popularizado para diferenciar el DOM clásico del DOM ensombrecido), y las *plantillas* (*templates*), que permiten encapsular bloques de contenido (HTML), presentación (CSS) y funcionalidad (JavaScript) de forma que no interaccionen con el resto de elementos de la página y solo quede expuesta la parte de ellos que desee el desarrollador. Otra tecnología estándar implicada son los *elementos personalizados* (*custom elements*), que permiten al desarrollador crear sus propios elementos de HTML. .. Important:: Las habilidades que deberías adquirir con este tema incluyen las siguientes: - Comprender la diferencia entre *shadow DOM* y *light DOM*. - Entender cómo se modifica la representación de una página tras incluir un *shadow tree* en ella. - Comprender la utilidad de encapsular partes de una página web en un componente web. - Saber como crear componentes web mediante el API estándar del W3C. - Saber cómo modificar la presentación de un componente sin modificar el DOM global. .. admonition:: Hazlo tú ahora :class: hazlotu A modo introductorio, lee la parte 1 de la `introducción a los componentes web`_ de Caleb Williams. .. _`introducción a los componentes web`: https://css-tricks.com/an-introduction-to-web-components/ Componentes web --------------- Vamos a ver las tecnologías de *shadow DOM*, elementos personalizados y plantillas juntas en acción. La página web que aparece más abajo incluye un elemento ``