如何创建和使用 Shadow DOM ?

Shadow DOM 是一种将组件的样式和行为封装起来的技术。下面是使用 Shadow DOM 的示例：

1.为要使用 Shadow DOM 的组件创建一个 HTML 模板。

<template id="my-component-template">
  <style>
    /* 样式 */
  </style>
  <slot></slot>
  <script>
    // 行为
  </script>
</template>

2.在 JavaScript 中使用该 HTML 模板创建一个 Shadow DOM。

// 获取要添加 Shadow DOM 的元素
const element = document.querySelector('#my-element');

// 创建 Shadow DOM 根节点
const shadowRoot = element.attachShadow({mode: 'open'});

// 从 HTML 模板中复制内容到 Shadow DOM
const template = document.querySelector('#my-component-template');
const content = template.content.cloneNode(true);
shadowRoot.appendChild(content);

3.在 HTML 中使用该组件。

<div id="my-element">
  <p>这是组件内容</p>
</div>

此时，<p>这是组件内容</p> 将被插入到组件模板的 <slot></slot> 占位符中，以便在 Shadow DOM 中呈现。用户无法通过 CSS 和 JavaScript 来改变 Shadow DOM 内部的样式和行为。