在本地化的 Polymer 1.0 应用程序中,我将顶级元素目录设置为“rtl”:
<html dir="rtl">
...
</html>
在自定义元素中,我想根据方向改变位置,所以我想要一个 CSS 规则
<style>
html[dir="rtl"] #SomeSubElement { .... }
</style>
但是,通过这样做,Polymer 将规则重命名为类似
html[dir="rtl"].my-custom-element #SomeSubElement.my-custom-element { ... }
这可以防止每次应用 CSS 规则。有没有办法避免对 CSS 规则的某些部分进行这种范围界定,即应该全局应用的 html[dir="rtl"] 部分?
谢谢!
最佳答案
我找到了正确的解决方案:
:host-context(html[dir="rtl"]) {
...
}
这在 this guide on shadow DOM in Polymer 中有更详细的介绍。 .
关于Polymer 1.0 中使用 html 方向支持 RTL 的 CSS 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33765656/