I’m currently testing the Slots feature and ran into an issue with how content and layout behave across states.
In my setup, I’m using an internal element slot that is shared across multiple states (default, error, and hover). I’ve added additional content inside the slot (multiple lines), and everything works as expected in the base state.
However, in the instance, when switching to the hover state, the slot does not preserve the injected content. Instead, it resets to the default version of that state (e.g., a single line), ignoring the extra items I previously added.
Additionally, I’m using this component nested inside another component that also contains a slot. In this scenario:
- The issue persists across nested slots
- The container inside the slot does not properly adapt to the content
- I have to manually adjust layout properties in each instance
Expected behavior:
- Slots should preserve all injected content across states
- Layout (including container sizing) should adapt consistently without manual overrides
- Nested slots should behave predictably and inherit content correctly
I’ve attached a video demonstrating the issue.