如何创建html shadow dom

创建HTML Shadow DOM需要以下步骤：

1. 创建一个HTML元素作为父元素，用于包含Shadow DOM。

<div id="parent"></div>

2. 使用`Element.attachShadow()`方法创建Shadow DOM根节点，并指定其模式（open或closed）。

const shadowRoot = document.getElementById('parent').attachShadow({ mode: 'open' });

3. 在Shadow DOM中添加DOM节点和样式。

const p = document.createElement('p');
p.textContent = 'This is a paragraph inside the Shadow DOM';
shadowRoot.appendChild(p);

const style = document.createElement('style');
style.textContent = `
  p {
    color: red;
  }
`;
shadowRoot.appendChild(style);

完整的示例代码如下：

<div id="parent"></div>

<script>
  const shadowRoot = document.getElementById('parent').attachShadow({ mode: 'open' });

  const p = document.createElement('p');
  p.textContent = 'This is a paragraph inside the Shadow DOM';
  shadowRoot.appendChild(p);

  const style = document.createElement('style');
  style.textContent = `
    p {
      color: red;
    }
  `;
  shadowRoot.appendChild(style);
</script>

此时，`<div>`元素内部将会包含一个Shadow DOM子树，其中包含一个红色文本的段落元素。注意，对于使用`attachShadow()`方法创建的Shadow DOM，其根节点不会被主文档的CSS样式影响。