CSS 与 Polymer 一起使用时，样式未应用于 firefox 中的 ag-grid

Question

详情请查看代码段和注释

问题要点：

在聚合物元素中使用 ag-grid webcomponent。由于样式形成本地聚合物 dom 不会在不使用 /deep/ 选择器的情况下应用于网格 dom，因此我在 dom-module 标签之外使用了样式标签。外部标签的样式正在 chrome 上应用，但它在 Firefox 中不起作用。

示例代码：

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

使用 Polymer 1.0 版和 ag-grid 企业版 8.2.0

问题：

在 Firefox 中没有应用样式的原因是什么。可以修复吗？

有没有办法在不使用 /deep/ 选择器的情况下将样式应用于本地 dom ag-grid？

Answer 1

您不应该使用 /deep/ 选择器。它已被弃用。

我认为你应该在你的 dom-module 中添加 .ag-header-cell，当附加元素时你可能需要在 ag-grid 更新 DOM 时调用 scopeSubtree .

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

CSS 与 Polymer 一起使用时，样式未应用于 firefox 中的 ag-grid

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

javascript

web-component

polymer

ag-grid