prerender: shadow root undefined if used in component did load

[peterpeterparker]

Stencil version:
stencil/core@1.11.x but seems the problem exists since a while

I'm submitting a:
[X] bug report

Current behavior:
I trier to chase that issue since almost a week without any success. I'm not able to build a Stencil app with prerendering if a shadowed component use any property or functions of el.shadowroot
at the componentDidLoad lifecycle.

Furthermore I'm able to reproduce the problem with an empty sample component and app (see steps to reproduce)

[53:21.6]  prerendering failed in 1.21 s

[ ERROR ]  Hydrate Error
           TypeError: Cannot read property 'querySelector' of null at MyComponent.componentDidLoad
           (/Users/daviddalbusco/projects/lab/stencil-prerendering/my-app/dist/hydrate/index.js:16003:41) at safeCall
           (/Users/daviddalbusco/projects/lab/stencil-prerendering/my-app/dist/hydrate/index.js:5984:36) at
           postUpdateComponent
           (/Users/daviddalbusco/projects/lab/stencil-prerendering/my-app/dist/hydrate/index.js:5938:13) at postUpdate
           (/Users/daviddalbusco/projects/lab/stencil-prerendering/my-app/dist/hydrate/index.js:5905:34) at
           updateComponent
           (/Users/daviddalbusco/projects/lab/stencil-prerendering/my-app/dist/hydrate/index.js:5907:13) at update
           (/Users/daviddalbusco/projects/lab/stencil-prerendering/my-app/dist/hydrate/index.js:5828:26) at
           /Users/daviddalbusco/projects/lab/stencil-prerendering/my-app/dist/hydrate/index.js:6951:13 at
           processTicksAndRejections (internal/process/task_queues.js:79:11)

npm ERR! code ELIFECYCLE

Expected behavior:
Being able to prerender even if shadow root is use at the component did load lifecycle

Steps to reproduce:

git clone https://github.com/peterpeterparker/stencil-prerendering

cd stencil-prerendering/my-component
npm install
npm build

cd ../my-app
npm install
npm build

Related code:

componentDidLoad() {
    const elem: HTMLDivElement = this.el.shadowRoot.querySelector('div');

    console.log(elem);
  }

[markcellus]

Running into this same issue. Does this mean there is no reliable way to query an element in the shadow root of a component? 😳