有关详细信息，请查看代码段和注释
Gist of problem:
在聚合物元件内使用ag-grid webcomponent . 由于样式形成本地聚合物dom不会在不使用 /deep/ 选择器的情况下应用于网格dom，因此我在 dom-module 标记之外使用了样式标记 . 外部标记中的样式将应用于chrome，但它在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:
样式未在Firefox中应用的原因是什么？可以修复吗？
有没有办法将样式应用于ag-grid的本地dom而不使用/ deep / selectors？
1 回答
你不应该使用
/deep/选择器 . 它已被弃用 .我认为你应该在你的
dom-module中添加.ag-header-cell，当连接元素时，你可能需要在ag-grid更新DOM时调用scopeSubtree.https://www.polymer-project.org/1.0/docs/api/Polymer.Base#method-scopeSubtree