Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.20.0

Current Behavior

When using serializeShadowRoot: false, the contents of the components are incorrectly rendered. Slot projection seems completly broken.

With Stencil 4.19+

For some components, the full render() method content is missing, only the slotted object is there with no slot:

Same component with Stencil 4.18.3

There are also another problem with the renderToString options.

const { html } = await stencil.renderToString(appHtml, {  }); 

This renders like setting serializeShadowRoot: true explicitly even though default is false. But null seems not to be equal to false here. The option is nullable.

serializeSHadowRoot must be explicitly set to false to use the old, but broken, behavior.

Expected Behavior

The old hydration concept to work fine again. Tested against 4.13.0 and 4.18.3, which works fine.

System Info

Stencil 4.20.0 with React Output Target 0.5.3. (latest stable).

Steps to Reproduce

Create a component with a (default) slot:

render() {
    return (
      <Host>
        <div>
          <slot></slot>
        </div>
      </Host>
    );
  }

Render the component with slot content:

<MyWhateverComponent>Abc</MyWhateverComponent>

The generate html is broken or the html of the components shadow dom is missing completely.

<my-whatever-component class="sc-my-whatever-component-h hydrated" s-id="1">
  <!--r.1-->
  Abc
  <div class="sc-my-whatever-component" c-id="1.0.0.0">
     <slot class="sc-my-whatever-component" c-id="1.1.1.0"></slot>
  </div>
</my-whatever-component>

See nextjs-app-pagerouter example in my repository: https://github.com/mayerraphael/stencil-dsd-ssr-playground

Code Reproduction URL

https://github.com/mayerraphael/stencil-dsd-ssr-playground

Additional Information

No response