Chrome Screen Reader扩展激活后破坏Shadow DOM样式及按钮功能的解决方案咨询

这是Chrome Screen Reader的默认行为吗？ #

这并非该扩展的默认设计，但它存在已知的Shadow DOM兼容性缺陷——尤其是对**隔离式Shadow DOM（closed shadow root）**的样式与DOM操作支持不佳。该扩展在注入辅助功能脚本时，可能会破坏Shadow DOM的样式隔离机制，导致内部样式无法正常渲染，进而影响依赖类名增删实现的按钮交互逻辑。

可行的解决办法 #

• 切换为开放Shadow DOM
  若项目使用的是隔离式Shadow DOM，尝试改为开放模式：attachShadow({ mode: 'open' })。开放模式下，外部脚本（包括屏幕阅读器扩展）能更安全地访问Shadow DOM内容，降低样式与功能冲突的概率。

• 用内联样式替代类名切换
  对于依赖类名变化实现的按钮交互，直接将关键样式写入元素的style属性，规避样式隔离被干扰的问题：

  // 替代类名切换的写法
  buttonElement.style.backgroundColor = '#007bff';
  buttonElement.style.color = '#ffffff';
  

• 使用原生CSS变量控制样式
  在Shadow DOM内部定义全局可访问的CSS变量，通过修改变量值来控制样式变化，而非切换类名：

  /* Shadow DOM内部样式 */
  :host {
    --button-default-bg: #007bff;
    --button-active-bg: #0056b3;
  }
  .custom-button {
    background-color: var(--button-default-bg);
  }
  

  然后通过JS修改变量：

  shadowRoot.host.style.setProperty('--button-default-bg', '#0056b3');
  

• 更换测试用的屏幕阅读器
  若上述方法无效，建议换用兼容性更好的工具，比如Windows平台的NVDA、macOS/iOS平台的VoiceOver，这些工具对Shadow DOM的支持更成熟，能更准确模拟真实用户的访问场景。

• 检查扩展权限设置
  进入Chrome扩展管理页面，查看Chrome Screen Reader的权限配置，确保它没有过度的DOM修改权限。部分版本的扩展可能因权限滥用干扰页面正常的DOM与样式逻辑。

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