Polymer 1.0 中使用 html 方向支持 RTL 的 CSS 样式

标签 css polymer

在本地化的 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/

相关文章:

html - 使文本适应容器的宽度

javascript - 隐藏菜单(jquery,css)

javascript - Polymer拖放事件对象属性包含父srcElement

html - Polymer (1.0) - 动态使用 xlink :href$ inside template not working properly

css - 中间带圆圈的单杠

css - css网格布局是如何工作的

javascript - 通过 zindex 获取 img src

ajax - Node.js/Express POST 请求正文解析为不正确的 JSON

dart - 高分子成分分布

session - 如何在 Polymer 中使用 app-localstorage-document