css - 如何摆脱 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#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 删除了对所有 shadow-DOM-piercing CSS 选择器的支持)是“修复”第 3 方组件(并在 Github 上提交拉取请求!)。

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