From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/html/elemento/content/index.html | 167 ++++++++++++++++++++++++++ 1 file changed, 167 insertions(+) create mode 100644 files/es/web/html/elemento/content/index.html (limited to 'files/es/web/html/elemento/content') diff --git a/files/es/web/html/elemento/content/index.html b/files/es/web/html/elemento/content/index.html new file mode 100644 index 0000000000..0e380c1cd9 --- /dev/null +++ b/files/es/web/html/elemento/content/index.html @@ -0,0 +1,167 @@ +--- +title: +slug: Web/HTML/Elemento/content +tags: + - Deprecado + - Elemento + - HTML + - Referencia + - Web + - Web Components +translation_of: Web/HTML/Element/content +--- +

{{Deprecated_header}}

+ +

El elemento HTML <content> es usado dentro de un  Shadow DOM como un {{glossary("insertion point")}} . No está pensado para ser usado en HTML ordinario . Es usado con Web Components.

+ +
+

Nota: 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 .

+
+ + + + + + + + + + + + + + + + + + + + + + + + +
Categorías de contenidoModelo de contenido transpatente
Contenido permitidoContenido dinámico
Omisión de etiquetas{{no_tag_omission}}
Elementos padre permitidosAny element that accepts flow content.
Interfase DOM{{domxref("HTMLContentElement")}}
+ +

Atributos

+ +

Este elemento incluye los atributos globales .

+ +
+
select
+
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 <content> .
+
+ +

Ejemplo

+ +

Aquí hay un ejemplo simple del uso del elemento <content> . Es un archivo HTML con todo lo necesario en el .

+ +
+

Nota: Para que este código funcione , el explorador en el que se muestre debe de soportar Web Components . Ver Enabling Web Components in Firefox .

+
+ +
<html>
+  <head></head>
+  <body>
+  <!-- The original content accessed by <content> -->
+  <div>
+    <h4>My Content Heading</h4>
+    <p>My content text</p>
+  </div>
+
+  <script>
+  // Get the <div> above.
+  var myContent = document.querySelector('div');
+  // Create a shadow DOM on the <div>
+  var shadowroot = myContent.createShadowRoot();
+  // Insert into the shadow DOM a new heading and
+  // part of the original content: the <p> tag.
+  shadowroot.innerHTML =
+   '<h2>Inserted Heading</h2> <content select="p"></content>';
+  </script>
+
+  </body>
+</html>
+
+ +

Si muestras esto en un explorador web , debe de verse como lo siguiente .

+ +

content example

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('Shadow DOM', "#the-content-element", "content")}}{{Spec2('Shadow DOM')}} 
+ +

Compatibilidad con exploradores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísiticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico35{{CompatGeckoDesktop("28")}} [1]{{CompatNo}}26{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CatacterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico 37{{CompatGeckoMobile("28")}} [1]{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

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

+ +

Ver también

+ + + +
{{HTMLRef}}
-- cgit v1.2.3-54-g00ecf