如何消除Shadow DOM中的用户代理样式表？Polymer 2.0场景求助

嘿，我之前刚好碰到过类似的Polymer 2.0 + Vaadin Grid样式穿透问题，给你几个在Chrome 63里完全可行的解决方案：

方案1：使用深度选择器/deep/穿透Shadow DOM #

在Chrome 63版本中，/deep/（也叫穿透选择器）还未被移除，它可以帮你突破多层Shadow DOM的样式隔离，直接定位到目标元素。你可以在全局样式或者Polymer组件的<style>标签里添加这段代码：

vaadin-grid /deep/ vaadin-grid-table /deep/ div#table:focus {
  /* 移除默认轮廓，或者替换成自定义样式 */
  outline: none;
  /* 可选：添加自定义焦点反馈，保证可访问性 */
  box-shadow: 0 0 0 2px rgba(0, 120, 215, 0.5);
}

注意点： #

• !important在这里通常不需要，因为同层级的样式优先级会高于用户代理样式；如果遇到优先级问题，可以加上。
• 虽然/deep/现在已经从标准中废弃，但在你使用的Chrome 63和Polymer 2.0环境下是完全兼容的。

方案2：通过JavaScript注入Shadow DOM样式 #

如果你不想依赖废弃的选择器，或者需要更精准的控制，可以用JS直接访问目标元素所在的Shadow Root，注入样式表：

在你的Polymer组件的ready()或者connectedCallback()方法中添加这段代码：

ready() {
  super.ready();
  // 小延迟确保Vaadin Grid内部组件完全初始化
  setTimeout(() => {
    // 逐层访问Shadow DOM
    const grid = this.shadowRoot?.querySelector('vaadin-grid');
    const gridTable = grid?.shadowRoot?.querySelector('vaadin-grid-table');
    if (gridTable?.shadowRoot) {
      // 创建样式元素并注入到目标Shadow Root
      const styleEl = document.createElement('style');
      styleEl.textContent = `
        div#table:focus {
          outline: none;
          box-shadow: 0 0 0 2px rgba(0, 120, 215, 0.5);
        }
      `;
      gridTable.shadowRoot.appendChild(styleEl);
    }
  }, 100);
}

优化建议： #

• 如果担心setTimeout的不确定性，可以用MutationObserver监听Vaadin Grid的Shadow DOM变化，等内部组件加载完成后再注入样式，这样更可靠。

重要提醒：可访问性 #

移除默认的焦点轮廓会影响键盘导航用户的体验，所以强烈建议替换成自定义的焦点样式（比如上面的box-shadow），确保用户能清晰看到当前焦点位置。

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