This translation is incomplete. Please help translate this article from English.
Deprecated
This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
L'element HTML <content> s'utilitza a l'interior de Shadow DOM como un insertion point. No està destinat a ser utilitzat en HTML ordinari. S'utilitza amb components Web Components. Ara s'ha reemplaçat per l'element <slot>.
Nota: Encara present en primer esborrany de les especificacions i posat en pràctica en diversos navegadors, aquest element s'ha eliminat en les versions posteriors de l'especificació.
| Categories de contingut | Contingut transparent. |
|---|---|
| Contingut permès | contingut dinàmic. |
| Omissió de l'etiqueta | Cap, tant l'etiqueta inicial com l’etiqueta final són obligatòries |
| Elements pares permesos | Qualsevol element que accepti contingut dinàmic . |
| Interfície DOM | HTMLContentElement |
Atributs
Aquest element inclou els atributs globals.
- select
- Una llista separada per comes dels selectors. Aquests tenen la mateixa sintaxi que els selectors CSS. Seleccionen el contingut per inserir en lloc de l'element
<content>.
Exemple
Aquí és un simple exemple d'ús de l'element <content> És un arxiu HTML amb tot el necessari.
Nota: Perquè aquest codi funcioni, i es visualitzi en el navegador, ha de ser compatible amb els components web. Veure Habilitació de Components Web en 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 es pot veure en un navegador web, ha de ser similar al següent.
Especificacions
| Especificació | Estat | Comentari |
|---|---|---|
| Shadow DOM The definition of 'content' in that specification. |
Obsolete |
Navegadors compatibles
| Característica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Suport bàsic | 35 | 28 (28) [1] | No support | 26 | No support |
| Característica | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Suport bàsic | 37 | 28.0 (28) [1] | No support | ? | ? |
[1] Si Shadow DOM no està activat en Firefox, els elements <content> es comportaran com HTMLUnknownElement. Shadow DOM es va implementar per primera vegada a Firefox 33 i està darrere d'una preferència, dom.webcomponents.enabled, que està desactivada per defecte.