如何摆脱影域中的用户代理样式表

Question

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

因为Polymer封装了卷影dom的CSS，并且有几个组件没有覆盖用户代理样式表，所以如果不提供混合，我似乎不能覆盖由用户代理表设置样式的组件子项。

例如: vaadin-grid组件(https://www.webcomponents.org/element/vaadin/vaadin-grid)在阴影树中有一个焦点，它不提供div: 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>

如何删除/覆盖它？

Answer 1

你唯一能做的就是“修复”第三方组件(并在Github上提交一个拉取请求)(因为Chrome移除了对所有阴影-DOM穿透CSS选择器的支持)。

编辑:我刚刚找到了this post，它提供了一种变通方法。不过，我自己还没有测试过。