实现 css 样式隔离的方法

CSS样式隔离通常指的是避免样式跨页面影响其他页面，这可以通过以下几种方法实现：

1. 使用内联样式：直接在HTML标签上应用样式。
2. 使用CSS模块：将CSS规则按照功能或页面划分为不同的模块，并通过BEM（Block Element Modifier）或其他命名策略隔离。
3. 使用CSS-in-JS库：如styled-components，将CSS直接写在React组件中。
4. 使用Shadow DOM：为自定义元素创建隔离的CSS环境。
5. 使用CSS Scoping：在HTML模板中使用<template>标签，并通过Web Components标准来实现样式隔离。

以下是使用Shadow DOM的示例代码：

// 创建一个自定义元素
customElements.define('isolated-component', class extends HTMLElement {
  constructor() {
    super();
 
    // 创建Shadow DOM
    const shadow = this.attachShadow({ mode: 'closed' });
 
    // 添加一些内部结构和样式隔离的内容
    const content = document.createElement('p');
    content.textContent = '这是一个隔离的组件';
    shadow.appendChild(content);
 
    // 添加内部样式
    const style = document.createElement('style');
    style.textContent = `
      p {
        color: blue;
        font-size: 20px;
      }
    `;
    shadow.appendChild(style);
  }
});
 
// 使用自定义元素
document.body.innerHTML = `<isolated-component></isolated-component>`;

在这个例子中，isolated-component 是一个自定义的HTML标签，它使用Shadow DOM来隔离其内部的样式，不会与页面上的其他样式冲突。