bug: slots get "hidden" attribute starting v4.41.0

[KillerCodeMonkey]

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

Current Behavior

since version 4.41.0 in my lib all slots get "hidden" attribute per default.

Expected Behavior

it should not add hidden attributes

System Info

System: node 24.11.0
    Platform: linux (6.14.0-123037-tuxedo)
   CPU Model: AMD Ryzen AI 9 HX 370 w/ Radeon 890M (24 cpus)
    Compiler: .../node_modules/@stencil/core/compiler/stencil.js
       Build: 1770399610
     Stencil: 4.42.1 🌍
  TypeScript: 5.8.3
      Rollup: 4.34.9
      Parse5: 7.2.1
      jQuery: 4.0.0-pre
      Terser: 5.37.0

Steps to Reproduce

In my case:

• fork the linked repo
• start the demo or run the unit tests

Code Reproduction URL

Mini Repo:
https://github.com/KillerCodeMonkey/stencil-quill-content-hidden-on-prop-chance
Actually Lib:
KillerCodeMonkey/stencil-quill#458

Additional Information

master branch of the repository is on 4.40.0. Everything works as expected
the linked pr adds hidden to the slots (check CI, it is failing as well)

[github-actions]

We need a minimal reproduction to be able to triage this issue.

Why do we need a minimal reproduction?

Reproductions allow the team to triage and fix issues quickly with a tiny team. They help us identify the source of the problem and verify that the issue is not caused by something specific to your project.

How can I create a reproduction?

Please use our Stencil Starter to create a minimal reproduction.

Other starter templates

Template	CodeSandbox
Stencil + Vitest	stencil-starter-vitest
Angular	stencil-angular-starter
NextJs	stencil-starter-next
React	stencil-starter-react
Vue	stencil-starter-vue

A reproduction should be as minimal as possible. This means removing any code that is not directly related to the issue. The less code there is, the easier it is to identify the problem.

You can also provide a link to a public GitHub repository that demonstrates the issue.

What happens next?

• If you provide a valid reproduction link, this issue will be triaged and addressed based on priority.
• If no reproduction is provided within 14 days, this issue may be automatically closed.
• You can always reopen the issue by providing a reproduction link.

---

Resources:

• How to create a Minimal, Reproducible Example
• The Importance of Reproductions

[johnjenkins]

hey @KillerCodeMonkey - can you make a minimal reproduction 🙏
I understand it's happening in your codebase - but that's too large to isolate the regression and make tests to stop it happening again in the future

[KillerCodeMonkey]

@johnjenkins thanks for the blazing fast response.

i somehow narrowed it down.

Mini repro example with quilljs: https://github.com/KillerCodeMonkey/stencil-quill-content-hidden-on-prop-chance

seems like there is an issue using a slot + dynamically added html elements.
If changing a property the created element gets "hidden".
In this example i used Quill to create an editor + append it to the host element.
When changing a property the added element gets "hidden".

as far as i tried something out, this does not happen, when there is no additional slot.

In the mini repo example -> just comment out the slot and uncomment the div -> works as expected

[johnjenkins]

hi @KillerCodeMonkey - thanks so much for the repro.
I can see the issue, however if the actual 'bug' is that the dynamically created element doesn't get hidden on componentDidLoad :D < it should.

The reason your element gets hidden is that it has no slot < this mirrors the behaviour of a shadow enabled component. So, the 'bug' you're seeing is actually due to a bugfix.

If instead, you were to add a new <slot name="editor"> and assign the dynamic element to it, all should be well :)

[KillerCodeMonkey]

@johnjenkins i kicked out quill.

and thanks for the response.. but is it then really a bugfix, when it breaks the previous behavior? it is more like a breaking change?

[KillerCodeMonkey]

And it is a little bit strange to add a new slot (which could be overwritten from outside.. when it should be only used internal...

So i am not that happy with this solution.

And in my lib the element has no fixed position... so it could be above or below the other slot...

And the bug is that it gets hidden... it should not get hidden... after property change.

[KillerCodeMonkey]

@johnjenkins sadly the issue gets closed that fast...

[johnjenkins]

but is it then really a bugfix, when it breaks the previous behavior? it is more like a breaking change?

It's a bugfix when that behaviour was unintended and undocumented and not working as intended :)

And it is a little bit strange to add a new slot (which could be overwritten from outside.. when it should be only used internal...
So i am not that happy with this solution.
And in my lib the element has no fixed position... so it could be above or below the other slot...
And the bug is that it gets hidden... it should not get hidden... after property change.

You could add multiple slots - top / bottom etc.

You could have no slots, then you will not get slotting behaviour < when you add <slot> you opt in to slotting behaviour.

The bug is, that it doesn't get hidden on componentDidLoad < the correct behaviour is that it should be hidden.

Sorry if you feel this is incorrect, but this is working as intended

[KillerCodeMonkey]

is the intended behavior documented anywhere
https://stenciljs.com/docs/templating-jsx#slots?

so it is hard to know what the expected behavior was/is

And yes... for consistency it should be hidden on did load