javascript - 使用 MutationObserver 监听 CSS 自定义变量的变化

Question

我正在寻找一种方法来使用 MutationObserver 监听 CSS 自定义变量的变化，实际上我正在使用主 index.html 文件中定义的 CSS 自定义变量来触发 Web 内容的不同主题。我想要的是一个干净的 MutationObserver 解决方案，我可以在所有/父/子 CustomElements 中使用它来侦听 index.html 主文件中 CSS 自定义 var 的更改中该 DOM 元素规则上的 CSS 自定义 var 的更改。

实际上，我无法监听从 CSS Custom var 向下传播的三个更改。例如。我在 CustomElement 中用于监听样式更改的代码：

#initObserver () {
    const brand = this.renderRoot.querySelector('#brand')

    const observer = new MutationObserver(
        this.#customStylesMutation
    )
    observer.observe(brand, {
        attributes: true,
        attributeFilter : ['style']
    })
}