All content of a @Id mapped element are removed from the DOM

Description of the bug / feature

If you have a template / component that modifies its child elements dynamically, you cannot use it with a LitTemplate as Flow will remove all the created children.

Minimal reproducible example

@JsModule("./views/empty/empty-view.ts")
@Tag("empty-view")
public class EmptyView extends LitTemplate {

    @Id
    private Div root;
}

import { customElement, html, LitElement, PropertyValues, query } from "lit-element";

@customElement("empty-view")
export class EmptyView extends LitElement {
  @query("#root")
  private root!: HTMLElement;

  createRenderRoot() {
    // Do not use a shadow root
    return this;
  }
  render() {
    return html`<div id="root"></div>`;
  }

  protected firstUpdated(_changedProperties: PropertyValues) {
    super.firstUpdated(_changedProperties);
    this.root.innerText = "Hello";
  }
}

Expected behavior

You see “Hello” in the view

Actual behavior

The view is empty. If you remove the @Id mapping, then you see “Hello”

Versions:

- Vaadin / Flow version: 18

[knoobie]

@mshabarov this looks kinda similar to the issue you are currently investigating https://github.com/vaadin/flow/issues/10086

[pleku]

Sounds like this (serious) ticket #8975 that we already have.

It is now reopened and to be continued there