MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

<content>

已废弃
该特性已经从 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 浏览器中展示,它应该是这样。

content example

规范

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 背后,它默认是关闭的。

另见

文档标签和贡献者

 此页面的贡献者: wizardforcel
 最后编辑者: wizardforcel,