CSS樣式沒有得到適用於Firefox的AG-電網

主旨問題：

使用內部的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？

來源

2017-05-24 Soumya Kishor Mishra

你不應該使用/deep/選擇器。它已被棄用。

我認爲你應該在你的dom-module中加入.ag-header-cell，當元素被附加時，當ag-grid更新DOM時，你可能需要調用scopeSubtree。

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

來源

2017-05-30 06:58:47 Ergo

是/ deep /已棄用。我想我沒有在細節中說清楚，但我已經提到它是對代碼塊的評論。讓我通過鏈接看看。感謝幫助。 –

在ag-grid更新dom工作後調用scopeSubtree（）。現在它正在採取適當的風格。再次感謝。 –

CSS樣式沒有得到適用於Firefox的AG-電網

回答

相關問題