如何摆脱 shadow-dom 中的用户代理样式表答案

【问题标题】：How to get rid of user agent style sheet in shadow-dom如何摆脱 shadow-dom 中的用户代理样式表
【发布时间】：2018-01-22 12:31:45
【问题描述】：

我在 Chrome 63.0.3239.132 上，在 Polymer 2.0 中构建一个 SPA。

由于 Polymer 封装了 shadow-dom 的 CSS，并且有几个组件不会覆盖用户代理样式表，因此如果它们不覆盖用户代理表样式的子组件，我似乎无法覆盖它们t 提供 mixin。

例如：vaadin-grid 组件 (https://www.webcomponents.org/element/vaadin/vaadin-grid) 在不提供 div:focus 的阴影树中有一个 div#table，因此用户代理样式表添加了蓝色轮廓。

<vaadin-grid>
...
#shadow-root
  <vaadin-grid-table>
    ...
    #shadow-root
    <div id="table">
         <!-- user agent adds a div:focus {outline: -webkit-focus ring-color auto 5px;} -->
    </div>

  </vaadin-grid-table>
</vaadin-grid>

如何删除/覆盖它？

【问题讨论】：

标签： css polymer web-component shadow-dom vaadin-grid

【解决方案1】：

您唯一能做的（因为 Chrome 删除了对所有 shadow-DOM-piercing CSS 选择器的支持）是“修复”第 3 方组件（并在 Github 上提交拉取请求！）。

编辑：我刚刚找到了this post，它提供了一种解决方法。不过我自己没有测试过。

【讨论】：