`Html` component filters out CSS variables

[mvysny]

The Html component removes CSS variables from the passed-in html snippet.

Example: just paste this into Skeleton Starter's MainView.java:

@Route("")
@PWA(name = "Project Base for Vaadin", shortName = "Project Base")
public class MainView extends VerticalLayout {

    public MainView() {
        Button button = new Button("Click me",
                event -> add(new Html("<div style=\"--foo:32px\"><div style=\"font-size: var(--foo)\">Should be HUGE but it's not.</div></div>")));
        add(button);
    }
}

Expected: huge text is rendered

Actual: the style="--foo:32px" is removed and the text is rendered using the default size.

Vaadin 14.0.12, Java 8, Linux, Firefox

[denis-anisimov]

The result in DOM is:

<div>
<div style="font-size: var(--foo)">Should be HUGE but it's not.</div>
</div>

so style="--foo:32px" is just absent.

[Legioth]

This happens because top-level attributes are recreated in Html.setOuterHtml(Document) by using Element.setAttribute. This triggers StyleAttributeHandler which takes the values one round through CSSReaderDeclarationList.readFromString and then passes the key through StyleUtil.styleAttributeToProperty which changes the name to Foo. This value is then converted "back" in Style.set through StyleUtil.stylePropertyToAttribute, to -foo instead of --foo. This means that the browser sees -foo:32px which is subsequently ignored.

The same problem can thus also be reproduced with anyElement.setAttribute("style", "--foo:32px");.