Component's ShadowRoot is null on attach when navigating from a Typescript view.

[tulioag]

Description of the bug / feature

Consider this view

@Route(value = "shadow")
public class ShadowView extends VerticalLayout {

    public ShadowView() {
        TextField field = new TextField();
        field.addAttachListener(ui -> field.getElement().executeJs("alert(this.shadowRoot)"));
        add(field);
    }
}

If you navigate to this view from a typescript view, the shadowRoot will be null. Otherwise it will be available.

A more complex example:

1. Download the project from https://start.vaadin.com/?preset=all&preset=partial-prerelease
2. Go to one of typescript views
3. Go to the collaborative-master-detail-view
4. See that an error is shown.

The errors are caused by the field-highlighter trying to access the components shadow roots.

Minimal reproducible example

my-app.zip

1. Run the application
2. Click in "Shadow".
3. Verify that the alert shows [object ShadowRoot]
4. Click in "Hello TS"
5. Click in "Shadow".
6. Verify that the alert shows null

Expected behavior

The alert should show [object ShadowRoot] in all cases.

Versions:

- Vaadin / Flow version: 22.0.0.alpha8/9.0.0.alpha10
- Java version: 8, 17
- OS version: Linux, MacOs

[Artur-]

The test case can actually be simplified to

public class ShadowView extends VerticalLayout {
    public ShadowView() {
        getElement().executeJs("alert(this.shadowRoot)");
    }
}

[Artur-]

The problem is that the view element is not attached to the DOM when the executeJS command is run.

You can see this more clearly if you change to

alert(this.parentElement.parentElement)

When you open the Java view directly, you get
[object HTMLBodyElement]
and when you navigate from TS to Java, you get
null

[platosha]

We need to investigate this. Let’s do a 1-day investigation here.

My gut feeling is that this is related to Flow / vaadin-router navigation lifecycle.

[vaadin-bot]

This ticket/PR has been released with platform 22.0.0.beta2 and is also targeting the upcoming stable 22.0.0 version.