如何摆脱 shadow-dom 中的用户代理样式 sheet

Question

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

由于 Polymer 正在封装阴影的 CSS-dom 并且有几个组件不会覆盖用户代理样式 sheet，看来我不能如果用户代理 sheet 不提供 mixin，则覆盖子组件的样式。

例如：vaadin-grid 组件 (https://www.webcomponents.org/element/vaadin/vaadin-grid) 在 shadow-tree 中有一个 div#table，它不提供 div:focus，所以用户代理样式 sheet 添加蓝色轮廓。

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

我如何remove/override这个？

Answer 1

你唯一能做的（因为 Chrome 删除了对所有阴影-DOM-穿孔 CSS 选择器的支持）是 "fix" 第 3 方组件（并在 Github! 提交拉取请求）。

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