ShadowRoot: Style TextArea inside vaadin-text-area

Flow
1

Hi,

in my application there is one TextArea which should get Monospace as font.

I understand the principle of a Shadow DOM, but i have no glue how to modify the “Stylable Shadow Parts”. Best would be to do it in the Java code (a subclass from Dialog)

Thanks and Kind regards
Michael

2

Hi Michael,

Our theming documentation for V14 is still being worked on, so there’s quite a lot of information missing at the moment. We’re hoping to publish the new version in a month or so.

This is how you style component shadow parts in Flow:

  1. Create a separate stylesheet for the component (e.g. textarea.css), and target the part with a css attribute selector like so:
[part="input-field"]
 {
   font-family: monospace;
}
  1. Include the stylesheet in your app with the @CssImport annotation, specifying the component tagname as the themeFor parameter (this will inject the styles into the component’s shadow dom):
@CssImport(value="textarea.css", themeFor="vaadin-text-area")
3

Hi Rolf,

great it worked. For others:

  • I placed the textarea.css under frontend/styles
  • I’ve added the @CssImport annotation at classlevel of the class which is subclassing Textarea
@CssImport(value="styles/textarea.css", themeFor="vaadin-text-area")

Kind regards and thanks for your help
Michael

4

Michael B.:
can I place the textarea.css in frontend\styles or should i use a different place?

That is exactly the place for it. If the exact location of the css file is .../frontend/styles/monospace-textarea.css, then you will import it with @CssImport(value = "./styles/monospace-textarea.css", themeFor = "vaadin-text-area")

Michel B.
I’m not sure where to add the @CssImport annotation. The textarea i want to have this monospaced Text for is a class which inherits from TextArea. Should i place the annotation at class level?

(Edit because I read your second question wrong)
Yes if you have your own extension of TextArea (e.g. class MonospaceTextArea extends TextArea), you can add the annotation there. Every instance of MonospaceTextArea will then have the monospace styling.

But you don’t need your own extended class of TextArea, it is also achievable by adding the annotation on your own Layout that will contain the TextArea instance that you want to style. You said in the initial post that the TextArea will be in a Dialog extension, so this is where you could add the annotation. With this, it will use the defined styles for all TextAreas in that Dialog. If you want it to only apply to one of multiple TextAreas, you’ll have to identify the one you want to style with a themename or a classname (and adapt the css accordingly).

@CssImport(value = "./styles/monospace-textarea.css", themeFor = "vaadin-text-area")
public class MyDialog extends Dialog {
	public MyDialog(){
		add(new TextArea());
	}
}