<content>
Obsoleto: Esta característica ya no se recomienda. Aunque es posible que algunos navegadores aún lo admitan, probablemente ya se ha eliminado de los estándares web relevantes, está en proceso de eliminación o solo se conserva por motivos de compatibilidad. Evite usarlo y actualice el código existente si es posible; consulte la tabla de compatibilidad en la parte inferior de esta página para orientar su decisión. Tenga en cuenta que esta característica puede dejar de funcionar en cualquier momento.
El elemento HTML <content> es usado dentro de un Shadow DOM como un 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 contenido | Modelo de contenido transparente |
|---|---|
| Contenido permitido | Contenido dinámico |
| Omisión de etiquetas | None, both the starting and ending tag are mandatory. |
| Elementos padre permitidos | Any element that accepts flow content. |
| Interfase DOM | HTMLContentElement (en-US) |
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 .
Especificaciones
Este elemento ya no está definido por ninguna especificación.