如何防止网站样式覆盖弹窗组件的自定义CSS样式？

下面是几个实用的解决思路，按隔离彻底程度排序：

• Shadow DOM 完全隔离
  这是最彻底的方案，把弹窗挂载到Shadow DOM中，其内部样式和外部样式完全隔绝，不会互相影响。实现示例：

  // 创建弹窗容器
  const modalWrapper = document.createElement('div');
  // 开启Shadow DOM
  const shadowRoot = modalWrapper.attachShadow({ mode: 'open' });
  // 向Shadow DOM中注入弹窗的HTML和专属样式
  shadowRoot.innerHTML = `
    <style>
      /* 这里写弹窗的所有样式，完全不受外部影响 */
      .modal { padding: 20px; background: #fff; border-radius: 8px; }
      .modal a { text-decoration: underline; color: #2563eb; }
    </style>
    <div class="modal">
      <p>这是弹窗内容，<a href="#">链接样式不会被外部覆盖</a></p>
    </div>
  `;
  // 把容器添加到页面
  document.body.appendChild(modalWrapper);
  

• 提升选择器优先级
  给弹窗根容器设置一个唯一度极高的类名（比如zullu-unique-modal-container），然后所有弹窗内部样式都基于这个类名编写，以此压过网站的全局选择器：

  /* 弹窗专属样式 */
  .zullu-unique-modal-container {
    /* 容器样式 */
  }
  .zullu-unique-modal-container a {
    text-decoration: underline !important; /* 仅当网站用了!important时需要 */
    color: #2563eb;
  }
  

  尽量避免滥用!important，只有当网站样式强制使用时再添加。

• 弹窗内部样式重置
  在弹窗样式开头，对内部所有元素做样式重置，清除外部继承的样式后再重新定义：

  .zullu-unique-modal-container * {
    all: unset; /* 重置所有样式 */
    box-sizing: border-box; /* 保留盒模型设置 */
  }
  /* 之后重新定义弹窗内元素的基础样式 */
  .zullu-unique-modal-container p {
    display: block;
    margin: 10px 0;
    line-height: 1.5;
  }
  .zullu-unique-modal-container a {
    text-decoration: underline;
    color: #2563eb;
  }
  

• 使用CSS层叠（@layer）
  把弹窗样式放到优先级更高的层中，确保其样式优先级高于网站样式：

  /* 定义层的优先级，modal层高于site层 */
  @layer site, modal;
  /* 弹窗样式放入modal层 */
  @layer modal {
    .zullu-unique-modal-container a {
      text-decoration: underline;
      color: #2563eb;
    }
  }
  

  现代浏览器均支持该特性，若需要兼容旧版浏览器，可优先考虑前几种方案。

内容的提问来源于stack exchange，提问作者Zullu Balti