<shadow>

版本：HTML5废弃

HTML <shadow> 元素 —Web 组件技术套件的废弃部分—目的是用作 Shadow DOMinsertion point。如果你在 shadow host 下面创建了多个 shadow root，你就可能已经使用了它。在正常的 HTML 没有任何用处。

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

属性

这个元素支持全局属性。

示例

这里是一个使用<shadow> 元素的简单示例。它是个包含所有所需东西的 HTML 文件。

注：这是个实验性的技术。为了使这个代码有效，你使用的浏览器必须支持 Web 组件。请见在 Firefox 中开启 Web 组件。

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

  <!-- this <div> will hold the shadow roots. -->
  <div>
    <!-- this heading will not be displayed -->
    <h4>my original heading</h4>
  </div>

  <script>
    // get the <div> above with its content
    var origcontent = document.queryselector('div');
    // create the first shadow root
    var shadowroot1 = origcontent.createshadowroot();
    // create the second shadow root
    var shadowroot2 = origcontent.createshadowroot();

    // insert something into the older shadow root
    shadowroot1.innerhtml =
      '<p>older shadow root inserted by
          &lt;shadow&gt;</p>';
    // insert into younger shadow root, including <shadow>.
    // the previous markup will not be displayed unless
    // <shadow> is used below.
    shadowroot2.innerhtml =
      '<shadow></shadow> <p>younger shadow
       root, displayed because it is the youngest.</p>';
  </script>

  </body>
</html>

如果你在 Web 浏览器中展示它，它应该是这样：

规范

Specification	Status	Comment
Shadow DOM shadow	Obsolete