Element API Style doesn't work with CSS values with !important

[pleku]

It is sometimes necessary to override existing component/element CSS or making sure that some important CSS is not easily/accidentally overridden by others.

Reproducing

1. For any component / element
2. Use for example getElement().getStyle().set("display", "contents !important");

Expected:

Inlined CSS for the element has

display: contents !important;

Actual:

Inlined CSS for the element has nothing set for display.

---

Caused likely by this code https://github.com/vaadin/flow/blob/master/flow-client/src/main/java/com/vaadin/client/flow/binding/SimpleElementBindingStrategy.java#L750
As the API in DOM for adding !important for any value is https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty e.g.

element.style.setProperty("display", "contents", "important")

[pleku]

This can be worked around with instead introducing a class name + css that targets the class name (and e.g. optionally a tag) and sets the important style instead.

[vaadin-bot]

This ticket/PR has been released with platform 14.7.4.

[vaadin-bot]

This ticket/PR has been released with platform 21.0.4.

[vaadin-bot]

This ticket/PR has been released with platform 22.0.0.beta2 and is also targeting the upcoming stable 22.0.0 version.