以下是使用 <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>
​x
 
<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>
​