bug: referenceNode is no child node of styleContainerNode

[tweis]

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.21.0

Current Behavior

Currently, if no preconnect link has been found, the first style element in the document is searched for, but this may not be within the styleContainerNode. This results in the following error message when using hydrateDocument:

 unhandledRejection Error: referenceNode not found in parentNode.childNodes
     at insertBefore (/app/index.js:40316:16)
     at MockHTMLElement.insertBefore (/app/index.js:39527:8)
     at addStyle (/app/index.js:10679:35)
     at attachStyles (/app/index.js:10705:4)
     at updateComponent (/app/index.js:11398:7)
     at /app/index.js:11384:39
     at enqueue (/app/index.js:11389:7)
     at dispatchHooks (/app/index.js:11384:11)
     at dispatch (/app/index.js:11354:27)
     at /app/index.js:12320:8

Expected Behavior

The expected behaviour is that only style elements within the styleContainerNode are searched for.

System Info

System: node 20.15.1
    Platform: darwin (23.6.0)
   CPU Model: Apple M2 Pro (12 cpus)
    Compiler: /node_modules/@stencil/core/compiler/stencil.js
       Build: 1722623140
     Stencil: 4.20.0 🚐
  TypeScript: 5.5.3
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.31.1

Steps to Reproduce

The error occurs when using a style element within a component during hydration with hydrateDocument.

Code Reproduction URL

https://github.com/ionic-team/stencil

Additional Information

No response

[tanner-reits]

Likely culprit of ionic-team/ionic-framework#29848

[tanner-reits]

Fixed by #5994

[christian-bromann]

A fix for this has been released in Stencil v4.22.0 🎉