The style method not work when using css variables

[CrystalWindSnake]

Description

from nicegui import ui

ui.add_body_html(
    """
 <div id="my-ele"></div>
"""
)

pointer = ui.query("#my-ele")

pointer.classes("h-[4rem] w-[4rem]")
pointer.tailwind.background_color("blue-400").position("absolute").z_index("50")
pointer.style(f"""--top: 10px;--left: 50px;top: var(--top);left: var(--left)""")

The --left and --top variable set by the style method in the above code do not work on the corresponding label.

[falkoschindler]

Thanks, @CrystalWindSnake!

Minimal reproduction:

ui.add_body_html('<div id="element">Test</div>')
ui.query('#element').style('--color: red; color: var(--color);')

In contrast, this works:

ui.label('Test').style('--color: red; color: var(--color);')

It looks like this line in query.js

document.querySelectorAll(this.selector).forEach((e) => (e.style[key] = val))

should be replaced with

document.querySelectorAll(this.selector).forEach((e) => e.style.setProperty(key, val))

Needs some more investigation and testing.

[falkoschindler]

ChatGPT's explanation why we need to use setProperty in this case:

The element.style[key] = value syntax in JavaScript works for directly setting CSS properties on an element, where key is the JavaScript-style camel case name of the CSS property you want to set (like backgroundColor for the CSS property background-color), and value is the value you want to set that property to.

However, CSS variables, which start with --, can't be set this way. This is due to the naming rules in JavaScript for property names. A JavaScript property name can't start with a hyphen -, and certainly can't start with --. This is why element.style['--my-variable'] = value would not work.

The setProperty method doesn't have this limitation, because it's a function and the variable name is passed as a string argument. This means it can accept anything as a property name, including strings that start with --, which is why it's used for setting CSS variables.

So, you can use element.style[key] = value for normal CSS properties like backgroundColor, width, height, etc. For CSS variables, which start with --, you should use element.style.setProperty(key, value).

[CrystalWindSnake]

👍