我在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>
我如何删除/覆盖这个?
1 回答
您可以做的唯一事情(因为Chrome删除了对所有影子DOM穿孔CSS选择器的支持)是“修复”第三方组件(并在Github上提交拉取请求!) .
编辑:我刚刚找到了this post,它提供了一种解决方法 . 我自己没有测试过这个 .