bug: Slotted elements within a scoped element not getting correct parentNode

[AndreBarr]

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

Current Behavior

For stencil versions >=4.25.0, (looks like only with experimentalSlotFixes enabled in the stencil config), if a scoped component has a wrapper around it's slot, such as:

<Host>
  <div class="slot-wrapper">
    <slot></slot>
  </div>
</Host>

then, any element slotted into this scoped element will not return the expected value when trying to get it's parentNode.

Example:

<scoped-parent>
  <slotted-content></slotted-content>
</scoped-parent>

In the code above the slotted-content element will return scoped-parent as it's parentNode and div as it's parentElement.

Expected Behavior

The expected behavior is that both the parentNode and parentElement for the slotted-content in the aforementioned example, should return the slot wrapper div element.

When inspecting the DOM you will see:

<scoped-parent>
  <div class="slot-wrapper">
    <slotted-content></slotted-content>
  </div>
</scoped-parent>

so it's expected that the div is both the parentNode and parentElement

System Info

System: node 21.1.0
    Platform: darwin (23.5.0)
   CPU Model: Apple M1 Pro (8 cpus)
    Compiler: /Users/andrebarrientos/Documents/repos/stenciljs-scoped-parentNode-issue/parent-node-issue/node_modules/@stencil/core/compiler/stencil.js
       Build: 1737602259
     Stencil: 4.25.0 🏅
  TypeScript: 5.5.4
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.31.1

Steps to Reproduce

Any scoped element that wraps it's slot internally will have this issue.

Steps to reproduce with my code reproduction:

1. git clone git@github.com:AndreBarr/stenciljs-scoped-parentNode-issue.git
2. cd stenciljs-scoped-parentNode-issue/parent-node-issue
3. npm i
4. npm run start
5. Open the devtools in the demo environment
6. Click the Get parentNode and parentElement button.
7. In the console you will see two tables, one representing elements slotted into a scoped parent and one for a shadowed parent.
8. Notice that the parentNode and parentElement values are mismatched for the scoped parent.

Code Reproduction URL

https://github.com/AndreBarr/stenciljs-scoped-parentNode-issue/tree/main

Additional Information

No response