Style custom Java component on Grid ItemDetail render

Flow
1

Hello,
I have a problem when I have to style a Java component that must appear as a detail of a Gird row.
This is my scenario: A Html Page UserView (with style) → Java class with the correct tag.
In my java implementation I add a Grid with Items to show and it works fine.
But when I click to see the ItemDetails the componet appears without style :frowning:

grid.setItemDetailsRenderer(new ComponentRenderer<Div, UserDetail>(data -> {
		 Div div = new Div();
		 div.setId("view-detail");
		 div.addClassNames("center-rows", "row-details");
		 ...
		 
		 retun div;

When this component is rendered the css classes are not present in the Vaadin-Grid shadowRoot (but in the UserView only)…you can imagine the result!

Where am I doing wrong? How can this situation be fixed?
It works only adding the css classes in the sharedstyle…is this the unique way to address this problem?

Thanks
Gianluca
I

2

Hi! It would help to see the resulting DOM.

From what I gather from your description, you did not expect that the <div class="center-rows row-details"> ends up in the light DOM of the grid and not inside the shadow DOM of it. If so, then that is expected and the correct behavior.

3

Hi,
let me explain my situation.

I have an HTML page, user-view where I use a vaadin Grid.

<dom-module id="user-view">
  <template>
    <style include="shared-styles">
      .center-rows{
		display: flex;
		justify-content: center;
		align-items: center;
	  }
		  
	  .row-details{
	    background-color: gray;
	  }
    </style>


    <vaadin-grid id="user-grid" theme="orders no-row-borders"></vaadin-grid>

  
  </template>
  ...
</dom-module>

In my Java class I work with the Grid adding Items as well.
After that I need to add a ItemDetail as I wrote previously.

grid.setItemDetailsRenderer(new ComponentRenderer<Div, UserDetail>(data -> {
		 Div div = new Div();
		 div.setId("view-detail");
		 div.addClassNames("center-rows", "row-details");
		 ...
		 
		 retun div;

Creating a my custom component Java side.

My question is: Where I need to add the view-detail Div css classes definition to be sure that they could work as my expectation?

As you can see I add their definition in user-view page, but it does not work.
Looking the HTML code, using the browser console, I can see the css classes in the #shadow-root

Can you explain me how can I solve this problem?

I have the same problem if I add the same Java component as grid column

Thanks a lot
Gianluca