javascript - 与 Polymer 一起使用时，CSS 样式不会应用于 Firefox 中的 ag-grid

Question

请检查代码片段和注释以了解详细信息

问题要点:

在 polymer 元素内使用 ag-grid web 组件。由于本地 polymer 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 enterprise版本8.2.0

问题:

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

有没有一种方法可以将样式应用到ag-grid的本地dom而不使用/deep/选择器？

Answer 1

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

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

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