<content> - HTML（超文本标记语言） 编辑
已废弃
该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。
HTML <content> 元素— Web 组件 的技术套件的废弃部分 — 用于 Shadow DOM 内部作为 insertion point，并且不可用于任何正常的 HTML，现在已被 <slot> 元素代替，它在 DOM 中创建一个位置，Shadow DOM 会插入这里。
注：虽然在规范的草案中出现，并且在多个浏览器中实现，这个元素依然会在规范的之后版本中移除。
| 内容分类 | 透明内容 |
|---|---|
| 允许的内容 | 流式内容 |
| Tag omission | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 任何接受流式内容的元素 |
| DOM 接口 | HTMLContentElement |
属性
这个元素包含 全局属性。
select- 逗号分隔的选择器列表，它们和 CSS 选择器语法相同。它们选择要插入的内容，来替换为
<content>元素。
示例
这里是一个使用 <content> 元素的简单示例。它是个 HTML 文件，包含所有所需的东西。
注：为了使这个代码有效，你使用的浏览器必须支持 Web 组件，请见 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>
如果你在 Web 浏览器中展示，它应该是这样。
规范
| Specification | Status | Comment |
|---|---|---|
| Shadow DOM content | Obsolete |
浏览器兼容性
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 35 | 28 (28) [1] | 未实现 | 26 | 未实现 |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 37 | 28.0 (28) [1] | 未实现 | ? | ? |
[1] 如果 Shadow DOM 在 Firefox 中没有开启， <content>元素会表现为 domxref("HTMLUnknownElement")}}。Shadow DOM 首先在 Firefox 33 中实现，并且在首选项 dom.webcomponents.enabled 背后，它默认是关闭的。
另见
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论