fix(runtime): apply textnodes to shadow DOM instead of light DOM (#4946)

* fix(runtime): apply textnodes to shadow DOM instead of light dom

fixes #4231

By default the `vdomRender` build flag is `false`. The Stencil parser detects any usage of a `h` function, this flag will be switched. In the component provided by author of the bug there hasn't been any vDOM to be parsed, therefor there was no usage of the function `h`.

Now, in `callRender` if we end up not having to render any vDOM we used to just attach the string (can also be a boolean or number) as text to the host element. This however doesn't work when a shadow DOM is registered for the component. In this case the text content is added to the light dom which is not being rendered.

To fix this we check if the component has a shadow DOM if attach the text node to that node.

* fix unit test

* use component meta flags to detect shadow dom

---------

Co-authored-by: Hans Claasen <no-reply@github.com>
Co-authored-by: Christian Bromann <git@bromann.dev>

src/runtime/test/render-text.spec.tsx

@@ -20,6 +20,30 @@ describe('render-text', () => {
     `);
   });
 
+  @Component({ tag: 'cmp-a', shadow: true })
+  class CmpAShadow {
+    render() {
+      return 'Hello World';
+    }
+  }
+
+  it('Hello World, innerHTML, await waitForChanges, shadow component', async () => {
+    const { body, waitForChanges } = await newSpecPage({
+      components: [CmpAShadow],
+    });
+
+    body.innerHTML = `<cmp-a></cmp-a>`;
+    await waitForChanges();
+
+    expect(body).toEqualHtml(`
+      <cmp-a>
+        <mock:shadow-root>
+          Hello World
+        </mock:shadow-root>
+      </cmp-a>
+    `);
+  });
+
   it('Hello World, innerHTML, await waitForChanges', async () => {
     const { body, waitForChanges } = await newSpecPage({
       components: [CmpA],

src/runtime/update-component.ts

@@ -266,7 +266,12 @@ const callRender = (hostRef: d.HostRef, instance: any, elm: HTMLElement, isIniti
           renderVdom(hostRef, instance, isInitialLoad);
         }
       } else {
-        elm.textContent = instance;
+        const shadowRoot = elm.shadowRoot;
+        if (hostRef.$cmpMeta$.$flags$ & CMP_FLAGS.shadowDomEncapsulation) {
+          shadowRoot.textContent = instance;
+        } else {
+          elm.textContent = instance;
+        }
       }
     }
   } catch (e) {