我正在处理一个使用 ReactJS 的项目，我想修改主题。我在为我的主题样式编写 css 选择器时遇到了问题。看起来 reactjs 使用了一些 shadow dom，这会破坏跨组件的 css 选择器。看起来聚合物使用了 shadow dom，它打破了跨组件的 css 选择器（按设计）。
<div id="root" class="light-theme">
<style>
.light-theme .bg-theme {
background-color: white;
}
</style>
<parent-element>
<child-element class="bg-theme">
</child-element>
</parent-element>
</div>
我希望child-element的背景颜色根据我添加到根元素的类而改变。
PS - 该项目也使用了polymer.js，这可能是shadow dom的来源吗？
更新
经过一些研究，并看到下面的答案之一，聚合物确实是影子 dom 的原因。
React 不做任何 shadow DOM 特定的事情；聚合物当然可以。他们有一个关于样式的文档页面。
本文档概述了这些功能，包括 [...] Shadow DOM polyfill 如何应用样式的细节
按照布兰登的链接，我在这个网站上找到了答案：
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/
该
/deep/组合子类似::shadow，但功能更强大。它完全忽略所有阴影边界并跨越到任意数量的阴影树中。简而言之，/deep/允许您深入了解元素的内部结构并针对任何节点。
<div id="root" class="light-theme">
<style>
.light-theme /deep/ .bg-theme {
background-color: white;
}
</style>
<parent-element>
<child-element class="bg-theme">
</child-element>
</parent-element>
</div>