CSS样式没有得到适用于Firefox的AG-电网

Question

请检查代码片段和注释细节

主旨问题：

使用内部的AG-电网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 
 
    ... 
 
-->

使用聚合物版本1.0和Ag-电网企业版本8.2.0

问题：

风格在Firefox中未得到应用的原因是什么？它可以修复吗？

有没有办法使用/ deep/selectors将样式应用到ag-grid的本地dom？

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