已废弃
该特性已经从 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 |
Working Draft |
浏览器兼容性
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
背后,它默认是关闭的。