阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    HTML shadow 标签

    HTML shadow 功能

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

    示例

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

    注:这是个实验性的技术。为了使这个代码有效,你使用的浏览器必须支持 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>
    

    属性

    <shadow> 标签支持 HTML 全局属性

    事件属性

    <shadow> 标签支持 HTML 事件属性

    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录