Components added with ComponentRenderer can cause client-side errors [2 days]

[tomivirkki]

Description

The ComponentRenderer, uses a parent container for all of the rendered Component instances that get passed to the client. The container gets added as a virtual child to the owner component so it doesn't automatically appear in the DOM on the browser. The individual child components originally included in the container get picked to the DOM on demand, for example, to the Grid column cells, when you scroll the Grid.

Some Flow components add internal JS executions that access the Web Component public API and Flow runs the executions for virtual child components even if they haven't actually been placed in the DOM. This is typically fine. However, in certain cases, accessing the Web Component public API may internally end up accessing the shadow DOM, etc, but since the element isn't actually in the DOM yet, the shadow DOM / internal props such as this.$ may have not yet been initialized and an error gets thrown.

It's debatable whether this should be fixed in the Web Components so that, for example, calling dangerouslySetHtmlValue for an unattached <vaadin-rich-text-editor> wouldn't throw an exception:

const rte = document.createElement('vaadin-rich-text-editor');
rte.dangerouslySetHtmlValue('<p>Some <b>bold</b> text</p>');
document.body.appendChild(rte);

The issue could also be fixed by appending the container to the owner as a regular child instead of a virtual child. As a consequence, there would be an additional hidden element in the DOM of the ComponentRenderer owners:

<vaadin-grid-column>
  <div class="component-renderer-container" hidden></div>
</vaadin-grid-column>

<vaadin-combo-box>
  <div class="component-renderer-container" hidden></div>
</vaadin-combo-box>

<vaadin-virtual-list>
  <div class="component-renderer-container" hidden></div>
</vaadin-virtual-list>

The container can be removed from the DOM programmatically in case it's considered problematic to have it there

Related issues:

• Grid+RichTextEditor : rich text editor does not show value when first set up #4551

Expected outcome

Client-side exceptions shouldn't occur.

Minimal reproducible example

See #4551

Steps to reproduce

See #4551

Environment

Vaadin version(s): 23+ (probably also V14)

Browsers

Issue is not browser related

[yuriy-fix]

Let's check how much effort would be needed for this task including testing it with the components. (within timebox of 2 days)

[tomivirkki]

It's debatable whether this should be fixed in the Web Components so that, for example, calling dangerouslySetHtmlValue for an unattached wouldn't throw an exception

It's better to fix the possible issues in the web components (for example vaadin/web-components#6871) instead of changing how the ComponentRenderer works, which would be more like a workaround for the root cause.