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

[johnjenkins]

gonna close this one out as this is all as expected (read the discussion around it here)

When applying experimentalSlotFixes: true, < the idea is to 'shield' and patch just enough internals, to make components work with 3rd party libraries that do not know about your components internals. As a result, these 3rd parties will insert nodes in incorrect places and report hydration errors when finding nodes they don't expect to be there.

To remove this behaviour, remove experimentalSlotFixes: true,

[AndreBarr]

@johnjenkins
There is another issue I'm running into regarding this update. I'm having to patch 3rd party libraries that I am using with my stencil components.
One example is using axe-core for testing. Internally it references element.children and element.parentNode frequently to traverse the DOM and check for a11y violations. The problem is that the stencil scoped elements now don't return what is expected when calling myComponent.children and axe-core isn't aware of the pseudo-shadow behavior.

[johnjenkins]

Understood @AndreBarr
However this is the desired behaviour.

Suggest either removing experimentalSlotFixes or transitioning the component to using shadowDOM (I’m assuming axe detects the shadowRoot and pierces appropriately)

[AndreBarr]

Thank you @johnjenkins . I'll try removing the experimentalSlotFixes and see if that resolves my issue.

[AndreBarr]

One thing I remember though, in the docs it says that the exprimentalSlotFixes will be the default in v5. Will there still be an option to disable it then?

[johnjenkins]

Yep.
I think the thought was to make the default true is all. If you actively make it false you won’t have to change anything going forward

[AndreBarr]

Hey @johnjenkins related to this I made this PR for the docs: stenciljs/site#1566.
I'm not 100% if I'm understanding it correctly though so my update might not be correct.