bug: `hidden` attribute initially ignored on children in non-shadow slot

[nwhittaker]

Prerequisites

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

Stencil Version

4.12.3

Current Behavior

Given a non-shadow component that renders a slot, any children with a hidden attribute lose the hidden attribute when initially rendered and become visible.

@Component({ tag: 'my-component' })
export class MyComponent {
  render() {
    return <slot />;
  }
}

<my-component>
  <p hidden>I'm hidden</p>
</my-component>

Expected Behavior

Given a non-shadow component that renders a slot, any children with a hidden attribute maintain the hidden attribute when initially rendered and remain hidden.

System Info

      System: node 20.10.0
    Platform: darwin (23.3.0)
   CPU Model: Apple M1 Max (10 cpus)
    Compiler: ./node_modules/@stencil/core/compiler/stencil.js
       Build: 1708455660
     Stencil: 4.12.3 🐍
  TypeScript: 5.3.3
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.27.1

Steps to Reproduce

1. Checkout the repro repo.
2. npm i
3. npm start
4. In the resulting browser window, the text, "I'm hidden", should be visible if the bug is present.

Code Reproduction URL

https://github.com/nwhittaker/hidden-children

Additional Information

Possibly inversely related to https://github.com/ionic-team/stencil/issues/4523.

Workarounds include enabling the shadow DOM in the component or wrapping the children in an element:

<my-component>
  <div>
    <p hidden>I'm hidden</p>
  </div>
</my-component>

[tanner-reits]

@nwhittaker Thanks for reporting! I've confirmed there's an issue here, so I'll get this labeled for us to dig into. We'll report back here with questions and updates!

[jvlobo]

Is there any expected fix for this? It has been a while since it was reported. I'm facing the same issue.

[Humai88]

Any updates? Also faced this issue