Fluent UI React Insights: APIs in v9. Slots, JSX children & triggers

Fluent UI Insights is a series that describes the design and decisions behind the Fluent UI design system. In the fourth episode, members of the Fluent UI team explain implementation details and context behind APis in Fluent UI React v9: slots, JSX children and triggers.
🔗 Links:
github.com/microsoft/griffel
github.com/microsoft/fluentui
react.fluentui.dev/
📚 Chapters:
00:00 - Introduction
00:22 - Intention and motivation for slots
01:53 - Slots v1 in Semantic UI React
03:33 - Slots v2 in Stardust UI React
04:42 - Slots v3 in Fluent UI React v9
06:04 - Component groups: collections and elements
06:50 - Collections API in Semantic UI React
07:45 - JSX children to define components
08:11 - Issues with React Context and useContextSelector
09:03 - Limitations of JSX approach
10:43 - Connection between a host component and children
11:33 - Why triggers API is needed?
12:35 - Triggers API journey
13:24 - Triggers API in Fluent UI React v9
14:36 - Limitations of Triggers API
14:56 - Summary of the episode
15:27 - Bloopers
💡 References:
#1 Conformance tests for slots in Fluent UI React v9 github.com/Semantic-Org/Seman...
#2 RFC for useContextSelector github.com/reactjs/rfcs/pull/119
#3 useContextSelector implementation in user-land github.com/dai-shi/use-contex...
#4 Fluent UI React v9 documentation react.fluentui.dev

[@Saturn2888]

You can fix the issue of nested children with context by having context consumers that re-apply the context to its children with a modifier. That way, you can track in which hierarchy an "open" even occurs. I use this method myself when I need to assign hierarchical addressing to components such as `/foo` for the parent and `/foo/bar` for all children of that component.

[@munna5553]

😊😊😊

[@dmitrykisel9564]

I checked your docs, now markup looks like canvas