diff options
Diffstat (limited to 'files/es/web/api/document/registerelement/index.html')
| -rw-r--r-- | files/es/web/api/document/registerelement/index.html | 115 |
1 files changed, 115 insertions, 0 deletions
diff --git a/files/es/web/api/document/registerelement/index.html b/files/es/web/api/document/registerelement/index.html new file mode 100644 index 0000000000..504cf8314b --- /dev/null +++ b/files/es/web/api/document/registerelement/index.html @@ -0,0 +1,115 @@ +--- +title: Document.registerElement() +slug: Web/API/Document/registerElement +translation_of: Web/API/Document/registerElement +--- +<p>{{APIRef("DOM")}}{{Deprecated_header}}{{draft()}}</p> + +<p>El <code><strong>Document.registerElement()</strong></code> registra un nuevo <a href="/en-US/docs/Web/Web_Components/Custom_Elements">elemento personalizado</a> en el navegador y devuelve un constructor para el nuevo elemento.</p> + +<div class="note"> +<p><strong>Nota:</strong> Esta es una tecnología experimental. El navegador que utilice debe ser compatible con Web Components. Ver <a href="/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">Web Components habilitados en Firefox</a>.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">var <em>constructor</em> = document.registerElement(<em>tag-name</em>, <em>options</em>);</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><em>tag-name</em></dt> + <dd>El nombre del elemento personalizado. El nombre debe contener un guión (-), por ejemplo <code>my-tag</code>.</dd> + <dt><em>options {{optional_inline}}</em></dt> + <dd>Un objeto que da nombre al prototipo que sirve de base para el elemento personalizado, y una etiqueta existente para extender. Ambos son opcionales.</dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Aquí hay un ejemplo muy simple:</p> + +<pre class="brush: js">var Mytag = document.registerElement('my-tag'); +</pre> + +<p>Ahora el nuevo tag se ha registrado en el navegador. La variable MyTag contiene un constructor que lo puedes usar para crear un elemento my-tag en el documento de la siguiente manera:</p> + +<pre class="brush: js">document.body.appendChild(new Mytag());</pre> + +<p>Esto inserta un elemento my-tag vacío que será visible si utiliza las herramientas de desarrollo del navegador. No será visible si usa la capacidad de ver el código fuente del navegador. Y no será visible en el navegador a menos que agregue algún contenido para la etiqueta. Esta es la manera de agregar contenido a la nueva etiqueta:</p> + +<pre class="brush: js">var mytag = document.getElementsByTagName("my-tag")[0]; +mytag.textContent = "I am a my-tag element."; +</pre> + +<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('Custom Elements')}}</td> + <td>{{Spec2('Custom Elements')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>35</td> + <td>31 (behind a flag)</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.4.4</td> + <td>31 (behind a flag)</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a dir="ltr" href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements">Custom Elements</a></li> +</ul> |
