Since update from vaadin 22 to 23 appending a element to the shadow root breaks the component

user_18407830 0
Viewed 156

Original Question

I want to add a loading indicator overlay to the grid.
I tried to append the overlay element to the shadow root by using the attachShadow method.

The following code works well in vaadin 22.

final Grid<String> grid = new Grid<>();
final Element element = new Element("div");
element.setText("Hello");
add(grid);
grid.getElement().attachShadow().appendChild(element);

When I execute the same code in vaadin 23 it breaks the component.

Alternative solution

I tried to extend the grid component on the client side with the following typescript code

import { Grid } from "@vaadin/grid";
export class CustomGrid extends Grid {
    static get is() {
        return 'custom-grid';
    }
}
customElements.define(CustomGrid.is, CustomGrid);

To use my custom grid in flow, I have extended the flow Grid class and added my custom typescript code with the @JsModule annotation.

@Tag("custom-grid")
@JsModule("./src/custom-grid/custom-grid.ts")
public class CustomGrid<T> extends Grid<T> {
}

I used the following code to add my custom grid to the layout

final CustomGrid<String> grid = new CustomGrid<>();
grid.addColumn(s -> s).setHeader("Hello");
grid.setItems(List.of("Item 1", "Item 2", "Item 3"));
add(grid);

The problem

The items are not visible. There are just blank rows. enter image description here

ps: extending other components like buttons or comboboxes works pretty well.

vaadin-flow vaadin
1 Answers

I faced the same issue with my own customization of Vaadin's Grid. I did exactly the same as you - and it worked with v22 but it does not with v23.

Although it's a dirty hack, it works by doing the follwing:

final Grid<String> grid = new Grid<>();
add(grid);
grid.getElement().executeJs("elem = document.createElement(\"div\"); elem.innerHTML=\"Hallo\"; this.shadowRoot.appendChild(elem);");
user_187371020
Related