Skip to main content

Make Components accept child-Elements

  • October 30, 2024
  • 0 replies
  • 187 views

Jan_Kaczmarek

When designing certain Components for Design Systems, I am always stumbling over the issue, that Instances cannot have nested elements.

Yes, there are workarounds using instance swapping and slots or creating a lot of hidden children. These work for Buttons or when there is a foreseeable count of variing children.

When designing Tables or Dropdowns the workarounds do not solve the issue for me.

The Solution: Let component instances hold children!

If that does not work: Give a “child-count” input to the instance, that controls how many nested components (example: Table (Parent Component) holding x nested Rows (child component))