0

I'm on Chrome 63.0.3239.132, building a SPA in Polymer 2.0.

Since Polymer is encapsulating CSS of the shadow-dom and there are several components which don't override the user agent style sheet, it appears that i can't override the components children styled by the user agent sheet if they don't offer a mixin.

e.g: The vaadin-grid component (https://www.webcomponents.org/element/vaadin/vaadin-grid) has a div#table in the shadow-tree which doesn't provide a div:focus, so the user agent style sheet adds a blue outline.

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

How do i remove/override this?

Laurin
  • 177
  • 1
  • 13

1 Answers1

0

The only thing you can do about it (since Chrome removed support for all shadow-DOM-piercing CSS selectors) is "fix" the 3rd party component (and file a pull request at Github!).

EDIT: I just found this post, which provides a workaround. I haven't tested this myself though.

craPkit
  • 615
  • 1
  • 7
  • 20