使用@scope限定CSS作用域在Firefox中失效，求解决方案

问题根源 #

Firefox对CSS @scope 规则的支持滞后：旧版本完全不支持，直到119版本才实现部分支持，且语法要求严格，这直接导致你的隔离样式和依赖CSS的折叠功能失效。

方案1：唯一类名前缀（最兼容，推荐） #

给嵌入的HTML根元素加一个独一无二的类名，所有样式都以这个类为前缀，既实现样式隔离，又兼容所有浏览器（包括Firefox、Chrome、IE）。

示例代码：

<!-- 嵌入的独立HTML -->
<div class="my-unique-embedded-component">
  <button class="collapse-btn">点击折叠</button>
  <div class="collapse-panel">折叠内容区域</div>
</div>

<style>
/* 所有样式都以根类为前缀，避免污染全局 */
.my-unique-embedded-component .collapse-btn {
  padding: 8px 14px;
  border: none;
  background: #f0f0f0;
  cursor: pointer;
}
.my-unique-embedded-component .collapse-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 14px;
  border: 1px solid #f0f0f0;
  margin-top: 4px;
}
.my-unique-embedded-component .collapse-btn.active + .collapse-panel {
  max-height: 200px;
  padding: 12px 14px;
}
</style>

<script>
// 折叠交互逻辑
const trigger = document.querySelector('.my-unique-embedded-component .collapse-btn');
trigger.addEventListener('click', () => trigger.classList.toggle('active'));
</script>

方案2：Shadow DOM（彻底隔离） #

如果嵌入场景允许使用JS，Shadow DOM是最彻底的隔离方案——内部样式和外部完全隔绝，不会互相影响，兼容性覆盖所有现代浏览器（包括Firefox）。

示例代码：

<!-- 先放一个空容器 -->
<div id="embedded-component-wrap"></div>

<script>
const wrap = document.getElementById('embedded-component-wrap');
// 创建Shadow根节点
const shadow = wrap.attachShadow({ mode: 'open' });

// 把组件内容写入Shadow DOM
shadow.innerHTML = `
  <style>
    .collapse-btn {
      padding: 8px 14px;
      border: none;
      background: #f0f0f0;
      cursor: pointer;
    }
    .collapse-panel {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
      padding: 0 14px;
      border: 1px solid #f0f0f0;
      margin-top: 4px;
    }
    .collapse-btn.active + .collapse-panel {
      max-height: 200px;
      padding: 12px 14px;
    }
  </style>
  <button class="collapse-btn">点击折叠</button>
  <div class="collapse-panel">折叠内容区域</div>
`;

// 绑定折叠事件
shadow.querySelector('.collapse-btn').addEventListener('click', function() {
  this.classList.toggle('active');
});
</script>

方案3：@scope兼容写法（仅适合Firefox 119+） #

如果必须使用@scope，需要确保语法符合Firefox的要求，同时做降级处理：

/* 降级：给不支持@scope的浏览器用类前缀样式 */
.my-embedded-component .collapse-btn {
  /* 样式代码 */
}
.my-embedded-component .collapse-panel {
  /* 样式代码 */
}

/* 仅在支持@scope的浏览器中生效 */
@supports (scope: (.my-embedded-component)) {
  @scope (.my-embedded-component) {
    .collapse-btn {
      /* 样式代码 */
    }
    .collapse-panel {
      /* 样式代码 */
    }
  }
}

注意：这种写法只能覆盖Firefox 119+及以上版本，旧版Firefox依然会使用降级样式。

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