注意：要使该代码生效，您的浏览器必须支持 Web 组件。

          <!-- 由 <content> 访问的原始内容 -->
<div>
  <h4>My Content Heading</h4>
  <p>My content text</p>
</div>

<script>
// 获取上面的<div>。
var myContent = document.querySelector('div');
// 在 <div> 上创建一个 shadow DOM
var shadowroot = myContent.createShadowRoot();
// 在 shadow DOM 中插入新的标题和原来 <p> 标签的内容。
shadowroot.innerHTML = '<h2>Inserted Heading</h2> <content select="p"></content>';
</script>

        

注意： 要使该代码生效，您的浏览器必须支持 Web 组件。