diff options
Diffstat (limited to 'files/es/web/html/element/template/index.html')
| -rw-r--r-- | files/es/web/html/element/template/index.html | 155 |
1 files changed, 155 insertions, 0 deletions
diff --git a/files/es/web/html/element/template/index.html b/files/es/web/html/element/template/index.html new file mode 100644 index 0000000000..b6fe0ca924 --- /dev/null +++ b/files/es/web/html/element/template/index.html @@ -0,0 +1,155 @@ +--- +title: <template> +slug: Web/HTML/Elemento/template +tags: + - Plantilla +translation_of: Web/HTML/Element/template +--- +<p><span class="seoSummary">El <strong>elemento</strong> <strong>HTML <code><template></code></strong> es un mecanismo para mantener el contenido </span> <span class="seoSummary">{{Glossary("HTML")}}</span> <span class="seoSummary">del lado del cliente que no se renderiza cuando se carga una página, pero que posteriormente puede ser instanciado durante el tiempo de ejecución empleando JavaScript.</span></p> + +<p>Piensa en la plantilla como un fragmento de contenido que está siendo almacenado para un uso posterior en el documento. El analizador procesa el contenido del elemento <strong><code><template></code> </strong>durante la carga de la página, pero sólo lo hace para asegurar que esos contenidos son válidos; sin embargo, estos contenidos del elemento no se renderizan.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categorías de Contenido</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content">Metadata content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">phrasing content</a>, script-supporting element</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td>Sin restricciones</td> + </tr> + <tr> + <th scope="row">Omisión de etiquetas</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Padres permitidos</th> + <td>Cualquier elemento que acepte <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Metadata_content">metadata content</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">phrasing content</a>, o <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Script-supporting_elements">script-supporting elements</a>. También se permiten como hijos de un elemento {{HTMLElement("colgroup")}} que no tenga un atributo {{htmlattrxref("span", "colgroup")}} .</td> + </tr> + <tr> + <th scope="row">Implicit ARIA role</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding role</a></td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>No <code>role</code> permitted</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLTemplateElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento sólo incluye <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p> + +<p>SInembargo, {{domxref("HTMLTemplateElement")}} tiene una propiedad {{domxref("HTMLTemplateElement.content", "content")}}, que es solo-lectura cuyo {{domxref("DocumentFragment")}} contiene el subárbol DOM que representa a la plantilla.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Primero empezamos con la parte HTML del ejemplo.</p> + +<pre class="brush: html"><table id="producttable"> + <thead> + <tr> + <td>UPC_Code</td> + <td>Product_Name</td> + </tr> + </thead> + <tbody> + <!-- datos opcionales pueden incluirse aquí opcionalmente --> + </tbody> +</table> + +<template id="productrow"> + <tr> + <td class="record"></td> + <td></td> + </tr> +</template> +</pre> + +<p>Inicialmente tenemos una tabla en la cual insertaremos más tarde contenido usando código JavaScript. Más abajo viene el template, el cual describe la estructura de un fragmento HTML representando la fila de una tabla.</p> + +<p>Ahora que la tabla ha sido creada y el template definido, usamos JavaScript para insertar filas en la tabla, con cada fila siendo construida usando el template como su base.</p> + +<pre class="brush:js;">// Comprobar si el navegador soporta el elemento HTML template element chequeando +// si tiene el atributo 'content' +if ('content' in document.createElement('template')) { + + // Instanciar la tabla con el tbody existente + // y la fila con el template + var t = document.querySelector('#productrow'), + td = t.content.querySelectorAll("td"); + td[0].textContent = "1235646565"; + td[1].textContent = "Stuff"; + + // Clonar la nueva fila e insertarla en la tabla + var tb = document.querySelector("tbody"); + var clone = document.importNode(t.content, true); + tb.appendChild(clone); + + // Crear una nueva fila + td[0].textContent = "0384928528"; + td[1].textContent = "Acme Kidney Beans"; + + // Clonar la nueva fila e insertarla en la tabla + var clone2 = document.importNode(t.content, true); + tb.appendChild(clone2); + +} else { + // Buscar otra manera de añadir filas a la tabla porque el + // elemento template no está soportado. +} +</pre> + +<p>El resultado es la tabla HTML original HTML , con dos nuevas filas adjuntadas via JavaScript:</p> + +<div class="hidden"> +<pre class="brush: css">table { + background: #000; +} +table td { + background: #fff; +}</pre> +</div> + +<p>{{EmbedLiveSample("Examples", 500, 120)}}</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','template element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','/scripting-1.html#the-template-element','template element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_navegadores">Compatibilidad navegadores</h2> + + + +<p>{{Compat("html.elements.template")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Web components: {{HTMLElement("slot")}} (e históríco: {{HTMLElement("shadow")}})</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots">Usando templates y slots</a></li> +</ul> |