files/es/web/html/element/content/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168

---
title: <content>
slug: Web/HTML/Element/content
tags:
  - Deprecado
  - Elemento
  - HTML
  - Referencia
  - Web
  - Web Components
translation_of: Web/HTML/Element/content
original_slug: Web/HTML/Elemento/content
---
<p>{{Deprecated_header}}</p>

<p>El elemento <a href="/en-US/docs/Web/HTML">HTML</a> <code>&lt;content&gt; es usado dentro de un </code> <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> como un {{glossary("insertion point")}} . No está pensado para ser usado en HTML ordinario . Es usado con <a href="/en-US/docs/Web/Web_Components">Web Components</a>.</p>

<div class="note">
<p><strong>Nota: </strong>Aunque está presente en un draft inicial de las especificaciones e implementado en varios exploradores , este elemento ha sido removido en versiones posteriores a la especificación .</p>
</div>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/es/docs/Web/Guide/HTML/Content_categories" title="HTML/Content_categories">Categorías de contenido</a></th>
   <td>Modelo de contenido transparente</td>
  </tr>
  <tr>
   <th scope="row">Contenido permitido</th>
   <td>Contenido dinámico</td>
  </tr>
  <tr>
   <th scope="row">Omisión de etiquetas</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Elementos padre permitidos</th>
   <td>Any element that accepts flow content.</td>
  </tr>
  <tr>
   <th scope="row">Interfase DOM</th>
   <td>{{domxref("HTMLContentElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes" name="Attributes">Atributos</h2>

<p>Este elemento incluye los <a href="/es/docs/Web/HTML/Global_attributes">atributos globales </a>.</p>

<dl>
 <dt>select</dt>
 <dd>Una lista de selectores separada por comas . Estos tienen la misma sintaxis que los selectores de CSS . Seleccionan el contenido a insertar en lugar del elemento &lt;content&gt; .</dd>
</dl>

<h2 id="Ejemplo">Ejemplo</h2>

<p>Aquí hay un ejemplo simple del uso del elemento &lt;content&gt; . Es un archivo HTML con todo lo necesario en el .</p>

<div class="note">
<p><strong>Nota: </strong>Para que este código funcione , el explorador en el que se muestre debe de soportar Web Components . Ver <a href="/en-US/docs/Web/Web_Components#enabling_web_components_in_firefox">Enabling Web Components in Firefox</a> .</p>
</div>

<pre class="brush: html">&lt;html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;
  &lt;!-- The original content accessed by &lt;content&gt; --&gt;
  &lt;div&gt;
    &lt;h4&gt;My Content Heading&lt;/h4&gt;
    &lt;p&gt;My content text&lt;/p&gt;
  &lt;/div&gt;

  &lt;script&gt;
  // Get the &lt;div&gt; above.
  var myContent = document.querySelector('div');
  // Create a shadow DOM on the &lt;div&gt;
  var shadowroot = myContent.createShadowRoot();
  // Insert into the shadow DOM a new heading and
  // part of the original content: the &lt;p&gt; tag.
  shadowroot.innerHTML =
   '&lt;h2&gt;Inserted Heading&lt;/h2&gt; &lt;content select="p"&gt;&lt;/content&gt;';
  &lt;/script&gt;

  &lt;/body&gt;
&lt;/html&gt;
</pre>

<p>Si muestras esto en un explorador web , debe de verse como lo siguiente .</p>

<p><img alt="content example" src="content-example.png"></p>

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

<table class="spec-table standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estatus</th>
   <th scope="col">Comentario</th>
  </tr>
  <tr>
   <td>{{SpecName('Shadow DOM', "#the-content-element", "content")}}</td>
   <td>{{Spec2('Shadow DOM')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con exploradores</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Caracterísitica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>35</td>
   <td><span style="font-size: 12px; line-height: 18px;">{{CompatGeckoDesktop("28")}}</span> [1]</td>
   <td>{{CompatNo}}</td>
   <td>26</td>
   <td><span style="font-size: 12px; line-height: 18px;">{{CompatNo}}</span></td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Catacterística</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Soporte básico </td>
   <td>37</td>
   <td>{{CompatGeckoMobile("28")}} [1]</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Si el Shadow DOM no está habilidado en Firefox , los elementos de &lt;content&gt; se comportarán como  {{domxref("HTMLUnknownElement")}} . Shadow DOM fue implementado por primera vez en Firefox33 y está detras de una preferencia , <code>dom.webcomponents.enabled</code>, el cual está deshabilitado por default .</p>

<h2 id="See_also" name="See_also">Ver también</h2>

<ul>
 <li><a href="/en-US/docs/Web/Web_Components">Web Components</a></li>
 <li>{{HTMLElement("shadow")}}, {{HTMLElement("template")}}, {{HTMLElement("element")}}</li>
</ul>

<div>{{HTMLRef}}</div>