我可以检测加载的样式中是否存在特定的 CSS 自定义变量吗？

Question

我正在创建一些自定义 Web 组件。其中一个组件是 light/dark 主题切换器。但是，这取决于正在加载的特定样式sheet。

如果没有加载正确的样式sheet，我想输出警告。

但是，用户有多种加载样式sheet的方式（例如link标签、@import语句等），因此不能保证他们会加载正确的sheet.

所需的样式sheet 中有一些非常具体的自定义变量和命名样式。所以我想知道是否有任何方法可以从JavaScript（在我的网络组件内）检查加载的样式sheet中是否存在这些变量或样式名称之一到当前页面.

Answer 1

非常感谢 RedRex 给我指点。自定义变量可以访问，但不能来自 document.style。你必须使用 getComputedStyle.

因此，在我的 Web 组件 Class 中，我有一个 connectedCallback 函数，只要将组件实例添加到页面，该函数就会运行。

    connectedCallback() {

        // Is the correct stylesheet loaded?
        if ( !getComputedStyle(this).getPropertyValue('--uib-css').includes('uib-brand') )
            console.warn('[uib-theme-changer] WARNING: It appears that you are not using uibuilder\'s uib-brand.css stylesheet. This component may not work as expected.')

    } // ---- end of connectedCallback ---- //

在CSS文件中，我有

:root, :root.light {
    color-scheme: light dark;

    /* Create a checkable var - helps web components know if this stylesheet is loaded.
     * NOTE: no space between : and text! */
    --uib-css:uib-brand;
}

也许值得注意的是，Web 组件旨在限制 light-DOM CSS 和 shadowDom CSS 之间的交互。但是，自定义变量旨在流入您的组件。

Footnote: For the curious, I am writing some custom web components that will play nice with Node-RED and node-red-contrib-uibuilder.

我可以检测加载的样式中是否存在特定的 CSS 自定义变量吗？

Can I detect if a specific CSS custom variable exists in the loaded styles?

javascript

css

web-component

css-variables