---
title: Web Components
slug: Web/Web_Components
tags:
  - Componentes
  - Componentes Web
  - Landing
  - TopicStub
  - Web Components
translation_of: Web/Web_Components
---
<div>{{DefaultAPISidebar("Web Components")}}</div>

<div class="summary">
<p>Los Componentes Web son un paquete de diferentes tecnologías que te permiten crear elementos personalizados reutilizables — con su funcionalidad encapsulada apartada del resto del código — y utilizarlos en las aplicaciones web.</p>
</div>

<h2 id="Conceptos_y_uso">Conceptos y uso</h2>

<p>Como desarrolladores, sabemos que reutilizar código tanto como sea posible es una buena idea. Esto tradicionalmente no es sencillo para estructuras de marcado personalizadas — piense en el complejo HTML (y sus estilos y scripts asociados) que en ocasiones se han tenido que escribir para renderizar controles de interfaz (UI) personalizados, y ahora usarlos múltiples veces puede crear un caos en la página si no se es cuidadoso.</p>

<p>Los Componentes Web apuntan a resolver dichos problemas — consiste en tres tecnologías principalmente, las que se pueden usar juntas para crear elementos personalizables versátiles que encapsulan la funcionalidad y pueda ser reutilizada donde sea sin miedo a colisiones de código.</p>

<ul>
 <li><strong>Custom elements</strong> (elementos personalizados): Un conjunto de APIs de JavaScript que permiten definir elementos personalizados y su comportamiento, que entonces puede ser utilizado como se deseé en la interfaz del usuario.</li>
 <li><strong>Shadow DOM</strong>: Un conjunto de APIs de JavaScript para fijar un árbol DOM "sombra" encapsulado a un elemento — que es renderizado por separado del documento DOM principal — y controlando funcionalidad asociada. De esta forma, se pueden mantener características de un elemento en privado, así puede tener el estilo y los scripts sin miedo de colisiones con otras partes del documento.</li>
 <li><strong>HTML templates</strong> (plantillas HTML): Los elementos {{HTMLElement("template")}} y {{HTMLElement("slot")}} permiten escribir plantillas de marcado que no son desplegadas en la página renderizada. Éstas pueden ser reutilizadas en múltiples ocasiones como base de la estructura de un elemento personalizado.</li>
</ul>

<p>La aproximación básica para implementar un componente web, generalmente es la siguiente:</p>

<ol>
 <li>Crear una clase o función en la cual especificar la funcionalidad del componente web. Si se usa una clase, usar la sintaxis de ES2015 (ver <a href="/en-US/docs/Web/JavaScript/Reference/Classes">Clases</a> para más información).</li>
 <li>Registrar el nuevo elemento personalizado utilizando el método {{domxref("CustomElementRegistry.define()")}}, pasándole el nombre del elemento a ser definido, la clase o función en la cuál su funcionalidad esta especificada, y opcionalmente, de que elemento hereda.</li>
 <li>Si se requiere, adjuntar un shadow DOM al elemento personalizado usando el método {{domxref("Element.attachShadow()")}}. Añadir elementos hijos, oyentes de eventos, etc., al shadow DOM utilizando métodos normales del DOM.</li>
 <li>Si se requiere, definir una plantilla HTML utilizando {{htmlelement("template")}} y {{htmlelement("slot")}}. Nuevamente usar métodos regulares del DOM para clonar la plantilla y acoplarla al shadow DOM.</li>
 <li>Utilizar los componentes personalizados en la página web cuando se desee, como se utilizaría cualquier otro elemento HTML.</li>
</ol>

<h2 id="Tutoriales">Tutoriales</h2>

<dl>
 <dt><a href="/es/docs/Web/Web_Components/Using_custom_elements">Utilizando elementos personalizados (Using custom elements)</a></dt>
 <dd>Guía que muestra como usar las características de los elementos personalizados para crear componentes web sencillos, así como revisar las llamadas del ciclo de vida y algunas características más avanzadas.</dd>
 <dt><a href="/es/docs/Web/Web_Components/Using_shadow_DOM">Utilizando el shadow DOM</a></dt>
 <dd>Guía que trata los fundamentos del shadow DOM, mostrando como adjuntar un shadow DOM a un elemento, añadir el árbol del shadow DOM, añadirle estilos y más.</dd>
 <dt><a href="/es/docs/Web/Web_Components/Using_templates_and_slots">Usando templates y slots</a></dt>
 <dd>Guía que muestra como definir una estructura HTML reutilizable utilizando elementos {{htmlelement("template")}} y {{htmlelement("slot")}} elements, y entonces usar esa estructura debto del componente web.</dd>
</dl>

<h2 id="Referencia">Referencia</h2>

<h3 id="Elementos_personalizados">Elementos personalizados</h3>

<dl>
 <dt>{{domxref("CustomElementRegistry")}}</dt>
 <dd>Contiene funcionalidad relacionada a los elementos personalizados, más notablemente el método {{domxref("CustomElementRegistry.define()")}} utilizado para registrar nuevos elementos personalizados para que se puedan usar en el documento</dd>
 <dt>{{domxref("Window.customElements")}}</dt>
 <dd>Retorna una referencia al objeto <code>CustomElementRegistry</code>.</dd>
 <dt><a href="/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks">Llamadas del ciclo de vida (Life cycle callbacks)</a></dt>
 <dd>Llamadas de funciones especiales declaradas dentro de la clase de definición de los componentes personalizados, los que afectan su comportamiento:
 <ul>
  <li><code>connectedCallback</code>: Invocado cuando el componente personalizado se conecta por primera vez al DOM del documento.</li>
  <li><code>disconnectedCallback</code>: Invocado cuando el componente personalizado se deconecta del DOM del documento.</li>
  <li><code>adoptedCallback</code>: Invocado cuando el componente personalizado se mueve a un nuevo documento.</li>
  <li><code>attributeChangedCallback</code>: Invocado cuando uno de los atributos del componente personalizado es añadido, removido o modificado.</li>
 </ul>
 </dd>
 <dd>
 <ul>
 </ul>
 </dd>
</dl>

<dl>
 <dt>Extensiones para crear elementos incorporados personalizados</dt>
 <dd>
 <ul>
  <li>El atributo global HTML {{htmlattrxref("is")}}: Permite especificar que un elemento estandar HTML debe comportarse como un elemento incorporado personalizado registrado.</li>
  <li>La opción "is" del método {{domxref("Document.createElement()")}}: Permite crear una instancia de un elemento HTML estandar que se comporta como un determinado elemento incorporado personalizado registrado.</li>
 </ul>
 </dd>
 <dt>Pseudo-clases CSS</dt>
 <dd>Pseudo-clases relacionadas específicamente a elementos personalizados:
 <ul>
  <li>{{cssxref(":defined")}}: Coincide con cualquier elemento declarado, incluyendo elementos incorporados y elementos personalizados definidos con <code>CustomElementRegistry.define()</code>).</li>
  <li>{{cssxref(":host")}}: Selecciona el <em>shadow host</em> del <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a> conteniendo el CSS que es usado.</li>
  <li>{{cssxref(":host()")}}: Selecciona el <em>shadow host</em> del <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a> conteniendo el CSS que es usado (para que se pueda seleccionar un elemento personalizado desde dentro de su <em>shadow DOM</em>) — pero solo si el selector determinado como el parámetro de la función coincide con el <em>shadow host</em>.</li>
  <li>{{cssxref(":host-context()")}}: Selecciona el <em>shadow host</em> del <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a> conteniendo el CSS que es usado (para que se pueda seleccionar un elemento personalizado desde dentro de su <em>shadow DOM</em>) — pero solo si el selector determinado como el parámetro de la función coincide con el shadow host de los ancestros del sitio desde el cual esta ubicado en la jerarquía del DOM.</li>
 </ul>
 </dd>
 <dd>
 <ul>
 </ul>
 </dd>
 <dt>Pseudo-elementos CSS</dt>
 <dd>Pseudo-elementos relacionados especificamente a elementos personalizados:
 <ul>
  <li>{{cssxref("::part")}}: Representa cualquier elemento dentro del <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow tree</a> que contiene un atributo {{HTMLAttrxRef("part")}} que coincida.</li>
 </ul>
 </dd>
</dl>

<h3 id="Shadow_DOM">Shadow DOM</h3>

<dl>
 <dt>{{domxref("ShadowRoot")}}</dt>
 <dd>Representa el nodo raíz de un subárbol de un <em>shadow DOM</em>.</dd>
 <dt>{{domxref("DocumentOrShadowRoot")}}</dt>
 <dd>Un mixin definiendo características que son disponibles a través de documentos y <em>shadow roots</em>.</dd>
 <dt>Extensiones a {{domxref("Element")}}</dt>
 <dd>Extensiones a la interfaz <code>Element</code> relacionada al <em>shadow DOM</em>:
 <ul>
  <li>El método {{domxref("Element.attachShadow()")}} conecta un árbol <em>shadow DOM </em>al elemento especificado.</li>
  <li>La propiedad {{domxref("Element.shadowRoot")}} retorna el <em>shadow root</em> acoplado al elemento determinado, o <code>null</code> si no hay un <em>shadow root</em> adjuntado.</li>
 </ul>
 </dd>
 <dt>Adiciones relevantes a {{domxref("Node")}}</dt>
 <dd>Adiciones a la interfaz <code>Node</code> relevantes al <em>shadow DOM</em>:
 <ul>
  <li>El método {{domxref("Node.getRootNode()")}} retorna la raíz del objeto del contexto, que opcionalmente incluye el <em>shadow root</em> si se encuentra disponible.</li>
  <li>La propiedad {{domxref("Node.isConnected")}} retorna un boleano indicando si el Nodo esta o no conectado (directamente o indirectamente) al objeto del contexto, es decir, el objeto {{domxref("Document")}} en el caso del DOM normal, o al {{domxref("ShadowRoot")}} en el caso del shadow DOM.</li>
 </ul>
 </dd>
 <dt>Extensiones a {{domxref("Event")}}</dt>
 <dd>Extensiones a la interfaz <code>Event</code> relacionada al shadow DOM:
 <ul>
  <li>{{domxref("Event.composed")}}: Retorna un {{jsxref("Boolean")}} que indica si el evento se va a propagar a través de los límites del <em>shadow DOM </em>hacia el<em> </em>DOM normal (<code>true</code>), o no (<code>false</code>).</li>
  <li>{{domxref("Event.composedPath")}}: Retorna la ruta del evento (objetos en los que oyentes serán invocados). Esto no incluye nodos en <em>shadow trees</em> si el <em>shadow root</em> fue creado con {{domxref("ShadowRoot.mode")}} cerrado.</li>
 </ul>
 </dd>
</dl>

<h3 id="Plantillas_HTML">Plantillas HTML</h3>

<dl>
 <dt>{{htmlelement("template")}}</dt>
 <dd>Contiene un fragmento de HTML que no es renderizado cuando se carga inicialmente un documento que lo contiene, pero puede ser desplegado en tiempo de ejecución usando JavaScript, principalmente usado como la base de la estructura de los elementos personalizados. La interfaz DOM asociada es {{domxref("HTMLTemplateElement")}}.</dd>
 <dt>{{htmlelement("slot")}}</dt>
 <dd>Un espacio termporal dentro de un componente web que se puede llenar con una plantilla de marcado propia, lo que permite crear árboles DOM separados y presentarlos juntos. La interfaz DOM asociada es {{domxref("HTMLSlotElement")}}.</dd>
 <dt>El atributo global HTML <code><a href="/en-US/docs/Web/HTML/Global_attributes/slot">slot</a></code></dt>
 <dd>Asigna un slot en un <em>shadow tree</em> de un <em>shadow DOM</em> shadow tree a un elemento.</dd>
 <dt>{{domxref("Slotable")}}</dt>
 <dd>Un mixin implementado tanto por los nodos {{domxref("Element")}} y {{domxref("Text")}}, definiendo características que les permiten convertirse en el contenido de un elemento {{htmlelement("slot")}}. El mixin define un atributo, {{domxref("Slotable.assignedSlot")}}, el cual retorna una referencia al nodo del slot donde esta insertado.</dd>
</dl>

<dl>
 <dt>Extensiones a {{domxref("Element")}}</dt>
 <dd>Extensiones a la interfaz <code>Element</code> relacionadas a slots:
 <ul>
  <li>{{domxref("Element.slot")}}: Retorna el nombre del slot del <em>shadow DOM</em> adjunto al elemento.</li>
 </ul>
 </dd>
 <dt>Pseudo-elementos de CSS</dt>
 <dd>Pseudo-elementos especificamente relacionados a slots:
 <ul>
  <li>{{cssxref("::slotted")}}: Coincide cualquier contenido que es insertado dentro de un slot.</li>
 </ul>
 </dd>
 <dt>El evento {{event("slotchange")}}</dt>
 <dd>Disparado en una instancia {{domxref("HTMLSlotElement")}} (elemento {{htmlelement("slot")}}) cuando el o los nodos contenidos es ese slot cambia.</dd>
</dl>

<h2 id="Ejemplos">Ejemplos</h2>

<p>Se están construyendo varios ejemplos en nuestro repositorio de GitHub <a href="https://github.com/mdn/web-components-examples">web-components-examples</a>. Se añadirán más con el tiempo.</p>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</th>
  </tr>
  <tr>
   <td>{{SpecName("HTML WHATWG","scripting.html#the-template-element","&lt;template&gt; element")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td>La definición de {{HTMLElement("template")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML WHATWG","custom-elements.html#custom-elements","custom elements")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td>La definición de <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">elementos personalizados HTML (HTML Custom Elements)</a>.</td>
  </tr>
  <tr>
   <td>{{SpecName("DOM WHATWG","#shadow-trees","shadow trees")}}</td>
   <td>{{Spec2("DOM WHATWG")}}</td>
   <td>La definición de <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a>.</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML Imports", "", "")}}</td>
   <td>{{Spec2("HTML Imports")}}</td>
   <td>Definición inicial de <a href="/en-US/docs/Web/Web_Components/HTML_Imports">HTML Imports</a>.</td>
  </tr>
  <tr>
   <td>{{SpecName("Shadow DOM", "", "")}}</td>
   <td>{{Spec2("Shadow DOM")}}</td>
   <td>Definición inicial de <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a>.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2>

<p><a href="https://twitter.com/polymer/status/1217578939456970754/photo/1"><img alt="Soporte de Componentes Web" src="https://pbs.twimg.com/media/EOW1l5dVAAADJuF?format=jpg&amp;name=large" style="height: 684px; width: 1200px;"></a></p>

<p>(Imagen tomada de <a href="https://www.webcomponents.org/">webcomponents.org</a>)</p>

<p>Para revisar detalladamente el soporte para ciertas características (sobre todo en versiones anteriores o navegadores antiguos), se puede consultar las páginas de referencia listadas anteriormente</p>

<h2 id="Ver_también">Ver también</h2>

<ul>
 <li><a href="https://www.webcomponents.org/">webcomponents.org</a> — Sitio que presenta ejemplos, tutoriales y otra información site featuring web components examples, tutorials, and other information.</li>
 <li><a href="https://open-wc.org/">open-wc </a>— Sitio que incluye recomendaciones para el desarrollo, linting, testeo, demos, publicación y automatización de componentes web</li>
 <li><a href="https://webcomponents.dev/features/">webcomponents.dev </a>— Sitio que provee de una interfaz de desarrollo online para trabajar con componentes web, ya sea nativamente o con diferentes librerías</li>
 <li><a href="https://github.com/hybridsjs/hybrids">Hybrids</a> — Librería para componentes web de código abierto, que favorece objetos simples y funciones puras sobre la sintasis <code>class</code> y <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">this</span></font>. Provee de una sencilla y funcional API para crear elementos personalizados.</li>
 <li><a href="https://www.polymer-project.org/">LitElement (Proyecto Polymer)</a> — Marcos de trabajo para componentes web de Google — con un conjunto de polyfills, mejoras y ejemplos. Actualmente es la forma más sencilla de usar componentes web.</li>
 <li><a href="https://github.com/devpunks/snuggsi#readme">Snuggsi</a> — Componentes web facilmente en ~1kB <em>incluyedo polyfill</em> — Todo lo que se necesita es un navegador y conocimientos básicos de HTML, CSS y clases de JavaScript para ser productivo.</li>
 <li><a href="https://stenciljs.com/">Stencil</a> — Conjunto de herramientas para construir componentes web de sistemas de diseño reusables y escalables.</li>
 <li><a href="https://github.com/slimjs/slim.js">Slim.js</a> — Librería para componenetes web de código abierto — una librería con alto rendimiento para la autoría rápida y fácil de componentes; extensible y acoplable y compatible con otros marcos de trabajo</li>
</ul>