阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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 事件属性

      目录
      目录