HTML <shadow> 元素

已过时
此功能已过时。虽然它可能仍在某些浏览器中工作，但是不鼓励使用，因为它可能随时被删除。尽量避免使用它。

HTML <shadow> 元素是 Web Components 技术套件中已过时的功能，目的是用作 shadow DOM insertion point。如果您在 shadow host 下创建了多个 shadow root，则可能已使用了它。它在普通的 HTML 中是没有用的。

特性

内容类别 透明内容模型。
允许的内容 流式内容。
标签省略 不允许，开始标签和结束标签都不能省略。
允许的父元素 任何接受流式内容的内容。
允许的 ARIA 角色 None
DOM 接口 HTMLShadowElement

属性

该元素包含了全局属性。

实例

注意： 这是一个实验技术。要使该代码正常工作，您显示的浏览器必须支持 Web 组件。请参阅在 Firefox 中启用 Web 组件。

以下是使用 <shadow> 元素的简单示例。它是一个 HTML 文件，其中包含所有必需的内容。

<html>
  <head></head>
  <body>

  <!-- 这个 <div> 将保存 shadow roots -->
  <div>
    <!-- 该标题将不会显示 -->
    <h4>我的原始标题</h4>
  </div>

  <script>
    // 获取上面的 <div> 的内容
    var origContent = document.querySelector('div');
    // 创建第一个 shadow root
    var shadowroot1 = origContent.createShadowRoot();
    // 创建第二个 shadow root
    var shadowroot2 = origContent.createShadowRoot();

    // 在老的 shadow root 插入一些内容
    shadowroot1.innerHTML =
      '<p>Older shadow root inserted by &lt;shadow&gt;</p>';
    // 在新的 shadow root 插入一些内容，包括 <shadow> 元素。
    // 如果下面不使用 <shadow>，之前的代码将不会被显示。
    shadowroot2.innerHTML =
      '<shadow></shadow> <p>Younger shadow root, displayed because it is the youngest.</p>';
  </script>

  </body>
</html>

尝试一下 »

如果您在网络浏览器中显示，应该如下所示。

HTML shadow 实例

规范

已经没有任何规范定义该元素了。

桌面浏览器兼容性

特性 Chrome Edge Firefox Internet Explorer Opera Safari
基础支持 35 不支持 331 不支持 26 不支持

移动浏览器兼容性

特性 Android Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari
基础支持 37 37 不支持 331 不支持 未知 不支持

1. 从版本 33 开始：该特性由 dom.webcomponents.enabled 首选项控制（需要设置为 true）。要更改 Firefox 中的首选项，请访问 about:config。

相关链接