• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • <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 浏览器中展示它,它应该是这样:

    规范

    SpecificationStatusComment
    Shadow DOM
    shadow
    Obsolete 

    上篇:<content>

    下篇:contextmenu