带你读《现代Javascript高级教程》二十二、JS Shadow DOM：创建封装的组件和样式隔离（1）https://developer.aliyun.com/article/1349526?groupCode=tech_library
2）样式隔离
使用 Shadow DOM，我们可以实现样式隔离，确保组件的样式不会泄漏到外部环境。这样可以避免样式冲突，并提高组件的可维护性。
.custom-button { background-color: 007bff; color: white; padding: 10px 20px; border-radius: 4px; cursor: pointer; } Outer Button // 创建 Shadow Root const hostElement = document.getElementById('custom-button-container'); const shadowRoot = hostElement.attachShadow({ mode: 'open' }); // 创建自定义按钮 const button = document.createElement('button'); button.classList.add('custom-button'); button.textContent = 'Shadow Button'; // 将按钮添加到 Shadow Root 中 shadowRoot.appendChild(button);
在上面的示例中，我们创建了一个具有相同类名的按钮，一个在外部环境中，一个在 Shadow DOM 组件中。由于 Shadow DOM 具有样式隔离的特性，这两个按钮将拥有不同的样式，且彼此不会相互影响。
4. 自定义 Shadow DOM API
我们还可以模拟实现一些自定义的 Shadow DOM API，以增强 Shadow DOM 的功能。下面是一个示例，展示如何实现一个自定义的 insertText 方法，用于向 Shadow DOM 中的元素插入文本内容：
function insertText(element, text) { const textNode = document.createTextNode(text); element.appendChild(textNode);} const shadowRoot = hostElement.attachShadow({ mode: 'open' });const div = document.createElement('div');insertText(div, 'Hello, Shadow DOM!'); shadowRoot.appendChild(div);
在上面的示例中，我们定义了一个名为 insertText 的函数，它接收一个元素和文本内容作为参数，并创建一个文本节点，将文本内容插入到元素中。然后，我们在 Shadow Root 中创建一个 div 元素，并使用 insertText 方法插入文本内容。
5. 参考资料
- Shadow DOM API - MDN Web Docsopen in new window
- Introduction to Shadow DOM - Web Componentsopen in new window
- Using Shadow DOM - Google Developersopen in new window
- Shadow DOM v1: Self-Contained Web Componentsopen in new window
- Web Components - MDN Web Docs
以上是关于 JS Shadow DOM 的介绍。通过使用 Shadow DOM，我们可以轻松创建封装的 Web 组件，并实现样式和行为的隔离。它在创建可重用组件、样式隔离和构建复杂 Web 应用程序时非常有用。
