弃用
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
兼容性表格
at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
HTML
<content>
element
—an obsolete part of the
Web 组件
suite of technologies—was used inside of
Shadow DOM
as an
insertion point
, and wasn't meant to be used in ordinary HTML.
It has now been replaced by the
<slot>
element, which creates a point in the DOM at which a shadow DOM can be inserted.
注意： Though present in early draft of the specifications and implemented in several browsers, this element has been removed in later versions of the spec, and should not be used. It is documented here to assist in adapting code written during the time it was included in the spec to work with newer versions of the specification.
| 内容类别 | Transparent content . |
|---|---|
| 准许内容 | 流内容 . |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parent elements | Any element that accepts flow content. |
| DOM 接口 |
HTMLContentElement
|
此元素包括 全局属性 .
select
<content>
元素。
Here is a simple example of using the
<content>
element. It is an HTML file with everything needed in it.
注意： For this code to work, the browser you display it in must support Web Components. See 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>
If you display this in a web browser it should look like the following.
This element is no longer defined by any specifications.
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
content
弃用
非标
|
Chrome 完整支持 35 | Edge 完整支持 79 |
Firefox
不支持
33 — 59
Disabled
|
IE 不支持 No | Opera 完整支持 26 | Safari 不支持 No | WebView Android 完整支持 37 | Chrome Android 完整支持 37 |
Firefox Android
不支持
33 — 59
Disabled
|
Opera Android ? | Safari iOS 不支持 No | Samsung Internet Android 完整支持 3.0 |
完整支持
不支持
兼容性未知
非标。预期跨浏览器支持较差。
弃用。不要用于新网站。
用户必须明确启用此特征。
<shadow>
,
<slot>
,
<template>
,
<element>
<content>
<shadow>
<slot>
<template>