Adding css to the sadow dom of a composite component

Flow
1

Hello,
i would like to add the content of a .css file to the shadow dom of a custom component derived from Composite<Div>.

for Example my code is as follow:

package AAA.BB.CCCCC.client.components;

import com.vaadin.flow.component.Composite;
import com.vaadin.flow.component.HasSize;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.dependency.StyleSheet;
import com.vaadin.flow.component.html.H3;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.H1;


@Tag("microitem-component")
//@CssImport(value = "./css/microItem.css", themeFor="Div")
@StyleSheet("microItem.css")
public class MicroItemComponent extends Composite<Div> implements HasSize {

	private H1 property;
	private H3 title;

	public MicroItemComponent() {
		property = new H1();
		title    = new H3();
		
		property.setClassName("property");
		title.setClassName("title");
		getContent().add(title, property);
	}
	
	public void setContent(String title1, String prop1)
	{
		this.title.setText(title1);
		this.property.setText(prop1);
	}
	
	public void setTitle(String title)
	{
		this.title.setText(title);
	}
	
	public void setProperty(String prop)
	{
		this.property.setText(prop);
	}
	
	public void setPropertyColor(String color)
	{
		this.property.getElement().getStyle().set("color", color);
	}

	public void setPropertyColorDefault()
	{
		this.property.getElement().getStyle().remove("color");
	}
	
}

as you can see, i have tried @CssImport and @StyleSheet, but both metodes do not add the styles to the shadow dom of this component. Is there a way to do this by using a file, or do i have to do this all in java, by setting the styles with getStyle().set() ?

Thank you!

2

Hi,

If you create a component this way you will not have any shadow DOM/shadow root. If you want a shadow root, you can extend PolymerTemplate and create the corresponding JS file. There you can also add styles that go into the shadow root. See e.g. https://vaadin.com/docs/v14/flow/polymer-templates/tutorial-template-basic.html

3

Thank you for your answer.
Sadly this is not really what i wanted to hear, but was afraid to.
The PolymerTemplate approach has two things i really do not like:

  1. Slow, and i do not know why… (see https://vaadin.com/forum/thread/17865334/slow-loading-time-for-polymertemplate )
  2. The CSS is embedded in some nasty string inside java code. I would more like to have a separate css file i can edit, give the designer to modify, explicitly for this component…

Anyway… Now i know i have to use some other way.
Thank you!