How to set monospace font on TextAreas that have a specific class?

Flow
1

I am still fighting somewhat with the Vaadin styling and the syntax of the Shadow DOM .css files.

What I want to achieve is that certain TextArea-s in my application (but not all!) display their value using a monospace font.
To that end I have marked those text-areas with a class “monospace”.

In the vaadin-texst-area-styles.css I then added this snippet to change the font of the <text-area part=“value” …> to monospace:

:host([class~="monospace"]
) [part="value"]
 {
	font: monospace;
}

However, the above has no effect.
It works when I set the elements theme and then instead select :host([theme~="something"] ) but I am already using the theme for something else and an element can have only have one theme. Thus I need to control the font via the host-element’s class but how do I do that? What’s the syntax to reference the/a host-element’s class?

Hope, I could make myself clear…

2

You are already using the ~= operator, which enables you to use multiple values in a theme by providing the items separated by a space character. So for example theme="foo bar baz" if you want to apply the themes foo, bar and baz. See the documentation on attribute selectors here: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

You can add multiple themes in a component with the addThemeName() method (setThemeName will override any previous values) if it exists, or through the Element API with component.getElement().getThemeList().add("themename");.

3

Ah - I hadn’t realized that one can have multiple themes, just like classes. I had misinterpreted the javadoc for setTheme(…) and hadn’t spotted the addTheme(…), yet. Thanks for pointing that out!

The setting of the font-attribute now works, but the browsers flags “monospace” as illegal font attribute. But that’s now a different story…

Later edit:
“font**-family**: monospace;”
was the magic incantation.

==> Problem solved! :slight_smile: