Edición de «Componentes web»

Los '''componentes web''' son un conjunto  de características que actualmente están siendo añadidas por el [[World Wide Web Consortium|W3C]] a las especificaciones [[HTML]] y [[Document Object Model|DOM]] de forma que permite la creación de widgets o componentes reutilizables en documentos y aplicaciones web.<ref>{{cite web|url=https://www.w3.org/standards/techs/components|title=Web Components Current Status - W3C|publisher=}}</ref> La intención de estos componentes es traer [[Programación orientada a componentes|la ingeniería basada en componentes]] a la [[World Wide Web]]. El modelo de componentes permite la [[Encapsulamiento (informática)|encapsulación]] e [[interoperabilidad]] de [[Etiqueta (lenguaje de marcado)|elementos de HTML]] individuales.{{Cita requerida}}

Las principales características de los componentes web son 4 y pueden utilizarse juntas o por separado:
* Elementos personalizados - APIs para definir elementos HTML nuevos.
* Sombra DOM - DOM y estilos encapsulados, con composición.
* Importaciones de HTML - Métodos declarativos para importar documentos HTML a otros documentos.
* Plantillas de HTML - El [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template elemento <template>] que permite que los documentos contengan trozos inertes del DOM.

== Características ==

=== Elementos personalizados ===
Hay dos tipos de elementos personalizados: autónomos e integrados. Los elementos personalizados autónomos son elementos HTML completamente diferenciados de los elementos HTML nativos, se construyen esencialmente desde abajo hacia arriba utilizando la [[Interfaz de programación de aplicaciones|API]] de elementos personalizados. Los elementos personalizados integrados son elementos que se construyen sobre elementos HTML nativos para reutilizar su funcionalidad.<ref>{{Cita web|url=https://www.w3.org/TR/custom-elements/|título=Custom Elements|fechaacceso=1 de diciembre de 2016|sitioweb=www.w3.org}}</ref>

=== Shadow DOM ===
Shadow DOM es una funcionalidad que permite al [[navegador web]] [[Renderización|renderizar]] elementos DOM sin necesidad de insertarlos en el árbol principal DOM del documento. Esto crea una barrera entre lo que el desarrollador y el navegador pueden alcanzar; el desarrollador no puede acceder al Shadow DOM de la misma manera que lo haría con los elementos anidados, mientras que el navegador puede renderizar y modificar ese código de la misma manera que lo haría con los elementos anidados. La consecuencia de esto es que para el [[CSS]] incluido en el shadow DOM de un elemento en particular los elementos [[HTML]] pueden ser encapsulados sin el riesgo de que los estilos CSS se filtren y afecten a los elementos que no se suponía que afectaran. Aunque estos elementos están encapsulados en HTML y CSS, todavía pueden disparar eventos que pueden ser recogidos por otros elementos del documento.<ref>{{Cita web|url=https://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/|título=What the Heck is Shadow DOM?|fechaacceso=1 de diciembre de 2016|fecha=15 de enero de 2011|sitioweb=Dimitri Glazkov}}</ref><ref name=":0">{{Cite web|url=https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom|title=Shadow DOM v1: Self-Contained Web Components  {{!}}  Web        {{!}}  Google Developers|website=Google Developers|language=en|access-date=1 de diciembre de 2016}}</ref>

El subárbol incluido en un elemento se llama shadow tree. El elemento al que se adjunta el Shadow tree es un Shadow host.

Shadow DOM siempre debe estar conectado a un elemento existente, ya sea adjuntandolo como elemento literal o mediante scripting. En [[JavaScript]], el Shadow DOM se une a un elemento utilizando Element. attachShadow ().<ref>{{Cita web|url=https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM|título=Shadow DOM|fechaacceso=1 de diciembre de 2016|sitioweb=Mozilla Developer Network}}</ref>

La capacidad de incluir HTML y [[CSS]] es esencial para la creación de elementos personalizados. Si el shadow DOM no existiese, diferentes elementos personalizados externos podrían interactuar de forma indeseada.

=== Importar HTML ===
HTML import es una herramienta para incluir documentos HTML y componentes web de fuentes externas sin necesidad de utilizar peticiones [[AJAX]] y métodos similares.<ref>{{Cita web|url=https://www.w3.org/TR/html-imports/|título=HTML Imports|fechaacceso=2 de diciembre de 2016|sitioweb=www.w3.org}}</ref>

La sintaxis para hacer una importación HTML es la siguiente:<syntaxhighlight lang="html">
<link rel="import" href="mydocument.html">
</syntaxhighlight>Para evitar cargar y ejecutar dos veces los scripts que se introducen a través de las importaciones, la importación HTML omite cargar y ejecutar archivos previamente cargados.<ref>{{Cita web|url=http://webcomponents.org/articles/introduction-to-html-imports/|título=Introduction to HTML Imports — WebComponents.org|fechaacceso=2 de diciembre de 2016|apellido=Community|sitioweb=webcomponents.org}}</ref>

[[Mozilla Firefox]] no tiene soporte para importación de HTML y no pretende implementarlo.<ref>{{Cita web|url=https://hacks.mozilla.org/2014/12/mozilla-and-web-components/|título=Mozilla and Web Components: Update ★         Mozilla Hacks – the Web developer blog|fechaacceso=2 de diciembre de 2016|sitioweb=hacks.mozilla.org}}</ref><ref name="7dc071b9">{{Cita web|url=https://hacks.mozilla.org/2015/06/the-state-of-web-components/|título=The state of Web Components ★         Mozilla Hacks – the Web developer blog|fechaacceso=2 de diciembre de 2016|sitioweb=hacks.mozilla.org}}</ref>

La importación HTML también está relacionada con la idea inicial en el desarrollo del hipertexto llamada [[Transclusión]], donde todo o parte de un documento se inserta en otro por referencia.

=== Plantillas HTML ===
La plantilla HTML es una forma de crear fragmentos de inserción de HTML que se usan a voluntad. La sintaxis de las plantillas HTML tiene este aspecto:
[[Archivo:Print_dialog_-_print_with_no_references_and_no_backgrounds.pdf|miniaturadeimagen]]
<syntaxhighlight lang="html">
<html>
    <template>
        <p>The HTML you wish to instantiate on will</p>
    </template>
</html>
</syntaxhighlight>Los scripts no se ejecutarán, y los recursos que están dentro de una plantilla no serán recuperados hasta que la plantilla sea eliminada.<ref>{{Cita web|url=http://webcomponents.org/articles/introduction-to-template-element/|título=Introduction to the template elements — WebComponents.org|fechaacceso=3 de diciembre de 2016|apellido=Community|sitioweb=webcomponents.org}}</ref>

== Soporte del navegador ==
Las plantillas HTML tienen soporte en [[Google Chrome]], [[Mozilla Firefox]], [[Microsoft Edge|Edge de Microsoft]], [[Safari (navegador)|Safari]], y [[Opera (navegador)|Ópera]].<ref>{{Cita web|url=https://caniuse.com/template|título=HTML templates {{!}} Can I use... Support tables for HTML5, CSS3, etc|fechaacceso=2023-06-08|sitioweb=caniuse.com}}</ref>

La compatibilidad con la versión inicial de elementos personalizados y Shadow DOM, conocida como "v0", está presente en algunos navegadores basados en [[Blink]] como Google Chrome y Opera, y en [[Mozilla Firefox]] (requiere un cambio de configuración manual). Los nuevos elementos personalizados y las APIs "v1" de Shadow DOM están siendo implementadas en Safari 10,<ref>{{Cita web|url=https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html|título=What's New in Safari|fechaacceso=21 de junio de 2016|editorial=[[Apple Inc.]]}}</ref>  Google Chrome (53.0.2785), y en desarrollo en Mozilla Firefox. Microsoft Edge aún no ha comenzado a implementar Custom Elements o Shadow DOM.<ref>{{Cita web|url=http://jonrimmer.github.io/are-we-componentized-yet/|título=Are We Componentized Yet?}}</ref>

La compatibilidad con navegadores más antiguos está implementada utilizando [[polyfills]] basado en [[JavaScript]].

== Bibliotecas ==
Hay varias librerías que están construidas sobre componentes web con el objetivo de aumentar el nivel de abstracción al crear elementos personalizados. Cuatro de las bibliotecas más importantes son: X-Tag, Slim.js, Polymer y Bosonic.

Dos de ellos, Bosonic y Polymer, proporcionan componentes listos para usar. Estos componentes se pueden utilizar indistintamente, ya que todos ellos están construidos con tecnologías web abiertas.<ref>{{Cita web|url=https://vaadin.com/blog/-/blogs/web-components-in-production-use-are-we-there-yet-|título=Web Components in production use – are we there yet?|fechaacceso=21 de noviembre de 2016|sitioweb=vaadin.com|idioma=en-US}}</ref>

== Historia ==
Los componentes web fueron introducidos por Alex Russell en la conferencia Fronteers Conference de 2011.<ref>{{Cita web|url=https://fronteers.nl/congres/2011/sessions/web-components-and-model-driven-views-alex-russell|título=Web Components and Model Driven Views by Alex Russell · Fronteers|fechaacceso=2 de diciembre de 2016|sitioweb=fronteers.nl}}</ref> 

Polymer, una biblioteca basada en componentes web, fue liberada por [[Google]] en 2013.<ref name="7dc071b9" />

== Referencias ==
{{Listaref}}

== Enlaces externos ==
* [http://webcomponents.org/ Webcomponents.org]
* [http://slimjs.com slim.js Biblioteca]
* [https://lit.dev lit.dev Biblioteca]
{{Control de autoridades}}
[[Categoría:Desarrollo web]]