CSS伪:dir(); :host-context() and directionality based styling

Question

在这个问题中，我正在为下面的问题寻找最干净的可能解决方案，同时敦促浏览器的编码人员 catch 规范，尤其是 :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() 伪类，人们似乎有一个 strong objection到 :host-context()
• 我真的不喜欢那些针对平台多样性的双重解决方案；想摆脱那些，但这只是次要问题

解决方案 ?:

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

但是鉴于此

• Chromium's bug on :dir()从 2018 年开始过时
• WebKit's bug on :dir()最后一次接触是在 2016 年!!!
• Firefox's bug on :host-context()从 2018 年开始过时，对规范有一些担忧
• WebKit 不愿意实现 :host-context()

-- 有了这一切:是否有其他解决问题的方法(希望首先解决 Safari 问题)。

JS based solutions are interesting but much less preferred.

Answer 1

2020 年 1 月的回答:

正如您所说:body 标记上的 dir 属性(在大多数情况下)将是语言更改的唯一指示。由于 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 };