diff options
Diffstat (limited to 'files/es/conflicting/web/web_components/using_custom_elements/index.html')
| -rw-r--r-- | files/es/conflicting/web/web_components/using_custom_elements/index.html | 182 |
1 files changed, 182 insertions, 0 deletions
diff --git a/files/es/conflicting/web/web_components/using_custom_elements/index.html b/files/es/conflicting/web/web_components/using_custom_elements/index.html new file mode 100644 index 0000000000..98c3562a7b --- /dev/null +++ b/files/es/conflicting/web/web_components/using_custom_elements/index.html @@ -0,0 +1,182 @@ +--- +title: Custom Elements +slug: Web/Web_Components/Custom_Elements +tags: + - Componentes Web + - Web Components + - custom elements +translation_of: Web/Web_Components/Using_custom_elements +translation_of_original: Web/Web_Components/Custom_Elements +--- +<p>Los <em>Custom Elements </em>son una característica que permite crear tus propios <a href="https://developer.mozilla.org/en-US/docs/Glossary/Element">elementos</a> HTML personalizados. Pueden tener un comportamiento personalizado y estilos CSS propios. Son una parte de los <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components">Web Components</a>, pero también pueden ser utilizados independientemente.</p> + +<div class="note"> +<p><strong>Nota:</strong> Los <em>Custom elements</em> sólo se han estabilizado recientemente, y partes de MDN todavía contienen información desactualizada de las APIs de los antiguos borradores de la especificación.</p> +</div> + +<p>Puede no estar claro por qué se creó la nueva capacidad de elementos personalizados, ya que ya era posible crear una etiqueta como <code><mytag></code> y aplicarle estilo con CSS, luego utilizar scripts para darle comportamiento. Una ventaja que tienen los <em>custom elements</em> son las reacciones de ciclo de vida (<em>lifecycle reactions)</em>, que permiten asociar comportamiento a diferentes partes del nuevo "ciclo de vida" del elemento. Por ejemplo, se puede asociar un comportamiento concreto cuando un nuevo elemento se inserta en el DOM ("conectado"), y otro distinto cuando es eliminado del DOM ("desconectado"), o cuando sus atributos cambien.</p> + +<p>El habilitador de claves de los elementos personalizados v1 es el método {{domxref("CustomElementRegistry.define()")}}, el cual se puede utilizar para definir un nuevo elemento personalizado. El nuevo elemento utilizará la clase suministrada para cualquier instancia, en lugar del valor predeterminado {{domxref("HTMLUnknownElement")}}. Los elementos personalizados pueden basarse en un elemento nativo como <code><button></code>, utilizando la sintaxis <code><button is="my-button"></code>; estos se llaman <em>elementos integrados personalizados.</em></p> + +<h2 id="Métodos_de_custom_element">Métodos de <em>custom element</em></h2> + +<p>Los <em>Custom elements</em> tienen los siguientes métodos que dictan su comportamiento:</p> + +<dl> + <dt>constructor()</dt> + <dd>Llamado cuando el elemento es creado o actualizado</dd> + <dt>connectedCallback()</dt> + <dd>Llamado cuando el elemento se es insertado en el documento, incluyéndose en un árbol shadow</dd> + <dt>disconnectedCallback()</dt> + <dd>Llamado cuando el elemento es eliminado de un documento</dd> + <dt>attributeChangedCallback(nombreDelAtributo, antiguoValor, nuevoValor, dominio)</dt> + <dd>Llamado cuando un atributo es cambiado, concatenado, eliminado o reemplazado en el elemento. Sólo llamado sobre <a href="#Atributos_Observados">atributos observados</a>.</dd> + <dt>adoptedCallback(antiguoDocumento, nuevoDocumento)</dt> + <dd>Llamado cuando un elemento es adoptado en otro nuevo documento</dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Los <em>custom elements</em> necesitan usar la <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes">sintaxis de clase</a> introducida en las versiones modernas de JavaScript.</p> + +<p>Archivo HTML:</p> + +<pre class="brush: html">Si no aparece nada debajo, es que tu navegador no soporta aún los Custom Elements. +<x-product data-name="Ruby" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/ruby.png" data-url="http://example.com/1"></x-product> +<x-product data-name="JavaScript" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/javascript.png" data-url="http://example.com/2"></x-product> +<x-product data-name="Python" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/python.png" data-url="http://example.com/3"></x-product></pre> + +<p>Archivo JS:</p> + +<pre class="brush: js">// Declaración de un <em>custom element</em> que hereda de HTMLElement +class XProduct extends HTMLElement { + constructor() { + // Siempre debe llamarse primero al constructor padre + super(); + + // Se crea el <em>shadow root</em> + var shadow = this.attachShadow({mode: 'open'}); + + // Se crea un elemnto img y se asignan sus atributos. + var img = document.createElement('img'); + img.alt = this.getAttribute('data-name'); + img.src = this.getAttribute('data-img'); + img.width = '150'; + img.height = '150'; + img.className = 'product-img'; + + // Añadir la imagen al shadow root. + shadow.appendChild(img); + + // Añadir un elemento de escucha a la imagen. + img.addEventListener('click', () => { + window.location = this.getAttribute('data-url'); + }); + + // Crear un enlace al producto. + var link = document.createElement('a'); + link.innerText = this.getAttribute('data-name'); + link.href = this.getAttribute('data-url'); + link.className = 'product-name'; + + // Añadir el enlace al shadow root. + shadow.appendChild(link); + } +} + +// Definir el nuevo elemento. +customElements.define('x-product', XProduct); +</pre> + +<p>Archivo CSS:</p> + +<pre class="brush: css">body { + background: #F7F7F7; +} + +x-product { + display: inline-block; + float: left; + margin: 0.5em; + border-radius: 3px; + background: #FFF; + box-shadow: 0 1px 3px rgba(0,0,0,0.25); + font-family: Helvetica, arial, sans-serif; + -webkit-font-smoothing: antialiased; +} + +x-product::slotted(.product-img) { + cursor: pointer; + background: #FFF; + margin: 0.5em; +} + +x-product::slotted(.product-name) { + display: block; + text-align: center; + text-decoration: none; + color: #08C; + border-top: 1px solid #EEE; + font-weight: bold; + padding: 0.75em 0; +} +</pre> + +<p>A continuación se muestra el ejemplo en vivo de lo anterior:</p> + +<p>{{ EmbedLiveSample('Example', '1500', '250', '', 'Web/Web_Components/Custom_Elements') }}</p> + +<h2 id="Atributos_Observados">Atributos Observados</h2> + +<p>Para ser notificado cuando un atributo cambia, se debe definir una lista de atributos observados al inicializar el elemento, poniendo un getter estático <code>observedAttributes</code> en la clase del elemento que devuelve un array de nombre de atributos.</p> + +<p>Archivo JS:</p> + +<pre class="brush: js">class HelloElement extends HTMLElement { + // Observar los cambios en el atributo 'name'. + static get observedAttributes() {return ['name']; } + + // Responder a los cambios en el atributo. + attributeChangedCallback(attr, oldValue, newValue) { + if (attr == 'name') { + this.textContent = `Hello, ${newValue}`; + } + } +} + +// Definir el nuevo elemento +customElements.define('hello-element', HelloElement); +</pre> + +<p>Archivo HTML:</p> + +<pre class="brush: html"><hello-element name="Anita"></hello-element></pre> + +<p>A continuación está el ejemplo en vivo de lo anterior:</p> + +<p>{{ EmbedLiveSample('Observed_attributes', '750', '100', '', 'Web/Web_Components/Custom_Elements') }}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>Los <em>Custom Elements </em>están definido en la siguiente especificación:</p> + +<table class="spec-table standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td><a href="https://html.spec.whatwg.org/multipage/scripting.html#custom-elements">The HTML Standard: Custom elements</a></td> + <td>LS</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Recursos">Recursos</h2> + +<ul> + <li><a href="https://developers.google.com/web/fundamentals/primers/customelements/">Custom elements v1: reusable web components - Google Developers tutorial</a></li> +</ul> |