css - CSS 伪 :dir(); :host-context() 和基于方向性的样式

问题描述

在这个问题中，我正在为以下问题寻找最干净的解决方案，同时敦促浏览器的编码人员赶上规范，尤其是:dir()一个！

这个问题和我目前最了解的解决方案：

我想根据方向性为下面的图像设置样式，例如在 RTL 模式下翻转它。图像驻留在影子 DOM 中。截至目前，我正在通过以下样式实现这一目标。

::shadowRoot
    <style>
        .directed-image:dir(rtl) { transform: rotateY(180deg); }    -- Firefox only as of now
        :host-context([dir=rtl]) { transform: rotateY(180deg); }    -- Chromium only as of now
    </style>

    <img class="directed-image" src="..." />

尚待解决的问题：

上面的样式都没有帮助Safari：它还没有实现:dir()伪类，人们似乎强烈反对:host-context()
我真的不喜欢那些针对平台多样性的双重解决方案。想摆脱那些，但这只是次要问题

解决方案？：

我希望拥有的最好的方法是:dir()获得广泛的跨浏览器支持——它将解决Safari的问题，并提供真正的方向性上下文感知样式（[dir=ltr]在上面的 WebKit 的错误链接中涉及到一些缺点）。

但鉴于

Chromium 的错误:dir()从 2018 年开始就已经过时了
WebKit 的错误:dir()最后一次触及是在 2016 年！！！
Firefox 的错误:host-context()从 2018 年开始就过时了，对规范有些担忧
以及 WebKit 不愿意实现:host-context()

- 拥有所有这些：是否有任何其他解决方案（希望首先解决Safari问题）。

基于 JS 的解决方案很有趣，但不太受欢迎。

标签： cssweb-componentcustom-element

2020年1月答案：

正如您所说：标签dir上的属性body将（在大多数情况下）是语言更改的唯一指示。由于 CSS 没有级联（还没有；正如你所说），目前唯一的选择是让 Elements 观察该属性的变化。所以我担心你唯一的选择是MutationObserver（在你拥有的元素中）

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: false, subtree: false };

css - CSS 伪 :dir(); :host-context() 和基于方向性的样式

问题描述

解决方案

推荐阅读