CSS Styles not getting applied to ag-grid in firefox when used with Polymer

Question

Please check the code snippet and comments for details

Gist of problem:

Using ag-grid webcomponent inside a polymer element. As the styles form the local polymer dom doesn't get applied to the grid dom without using /deep/ selector, so I was using a style tag outside the dom-module tag. The styles from the outside tag are getting applied on chrome but it is not working in Firefox.

Example code:

<!-- 
    ...
    import files and dependencies
    ...
-->
<style type="text/css">
    /*
        ag-grid styles defined here are only getting applied  in Chrome. Not working in Firefox. But defining styles here is useful as this solves the problem of using /deep/ css selector which is deprecated. 
    */
    .ag-header-cell {
        background: red; 
        /*
            This CSS style will not get applied on firefox and cannot be found on its developer console. 
        */
    }
</style>
<dom-module id="my-element">
    <template>
        <style type="text/css">
            #grid /deep/ .ag-header-cell {
                background: orange; 
                /*
                    This style will work both in chrome and firefox. But /deep/ is deprecated and will be removed from browsers soon
                */
            }
        </style>
        <div id="gridHolder">
            <ag-grid></ag-grid>
        </div>
    </template>
    
</dom-module>
<!--
    ...
    Polymer element js code with ag-grid initialization code
    ...
-->

Using Polymer version 1.0 and ag-grid enterprise version 8.2.0

Questions:

What is the cause of styles not getting applied in Firefox. Can it be fixed?

Is there a way to apply styles to local dom of ag-grid with out using the /deep/ selectors?

Answer 1

You are not supposed to use /deep/ selector. It is deprecated.

I think you should be adding .ag-header-cell inside your dom-module, and when element is attached you might need to call scopeSubtree when ag-grid updates the DOM.

https://www.polymer-project.org/1.0/docs/api/Polymer.Base#method-scopeSubtree