如何在shadow-dom中删除用户代理样式表

Question

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

由于Polymer封装了shadow-dom的CSS，并且有几个组件没有覆盖用户代理样式表，所以看起来我不能覆盖用户代理表设置的子组件提供一个混合物。

例如：vaadin-grid组件（https://www.webcomponents.org/element/vaadin/vaadin-grid）在阴影树中有一个div＃表，它不提供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选择器的支持）是＆＃34; fix＆＃34;第三方组件（并在Github上提交拉取请求！）。

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