如何在shadow-dom中摆脱用户代理样式表

Question

我在Chrome 63.0.3239.132上，在聚合物2.0中构建SPA。

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

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

<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>

如何删除/覆盖它？

Answer 1

您唯一能做的(因为Chrome删除了对所有影子DOM穿孔CSS选择器的支持(就是"修复"第三方组件(并在Github上提交拉取请求！

编辑：我刚刚找到了这篇文章，它提供了一种解决方法。不过我自己还没有测试过。