var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var v=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),k=(a,e)=>{for(var l in e)r(a,l,{get:e[l],enumerable:!0})},c=(a,e,l,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of m(e))!y.call(a,s)&&s!==l&&r(a,s,{get:()=>e[s],enumerable:!(o=b(e,s))||o.enumerable});return a};var x=(a,e,l)=>(l=a!=null?p(u(a)):{},c(e||!a||!a.__esModule?r(l,"default",{value:a,enumerable:!0}):l,a)),f=a=>c(r({},"__esModule",{value:!0}),a);var i=v((C,t)=>{t.exports=_jsx_runtime});var A={};k(A,{default:()=>h,frontmatter:()=>N});var n=x(i()),N=void 0;function d(a){let e={a:"a",code:"code",h1:"h1",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",strong:"strong",...a.components},{EpicVideo:l}=e;return l||g("EpicVideo",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:"Slots"}),` `,(0,n.jsx)(l,{url:"https://www.epicreact.dev/workshops/advanced-react-patterns/intro-to-slots"}),` `,(0,n.jsx)("callout-success",{children:(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"One liner:"}),` Slots allow you to specify an element which takes on a particular role in the overall collection of components.`]})}),` `,(0,n.jsx)(e.p,{children:`This pattern is particularly useful for situations where you're building a UI library with a lot of components that need to work together. It's a way to provide a flexible API for your components that allows them to be used in a variety of contexts.`}),` `,(0,n.jsx)(e.p,{children:`If you're building a component library, you have to deal with two competing interests:`}),` `,(0,n.jsxs)(e.ol,{children:[` `,(0,n.jsx)(e.li,{children:"Correctness"}),` `,(0,n.jsx)(e.li,{children:"Flexibility"}),` `]}),` `,(0,n.jsx)(e.p,{children:`You want to make sure people don't mess up things like accessibility, but you also want to give them the flexibility to build things the way their diverse needs require. Slots can help with this.`}),` `,(0,n.jsxs)(e.p,{children:[`Here's a quick example of a component that uses slots (from the `,(0,n.jsx)(e.a,{href:"https://react-spectrum.adobe.com/react-aria/index.html",children:(0,n.jsx)(e.code,{children:"react-aria"})})," docs):"]}),` `,(0,n.jsx)(e.pre,{"data-line-numbers":"true","data-lang":"tsx",style:{color:"var(--base05)",backgroundColor:"var(--base00)"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"1",children:["<",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"CheckboxGroup"}),">",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"2",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"Label"}),">Pets",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"3",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"MyCheckbox"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"value"}),(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),'"',(0,n.jsx)(e.span,{style:{color:"var(--base0B)"},children:"dogs"}),'"',">Dogs",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"4",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"MyCheckbox"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"value"}),(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),'"',(0,n.jsx)(e.span,{style:{color:"var(--base0B)"},children:"cats"}),'"',">Cats",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"5",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"MyCheckbox"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"value"}),(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),'"',(0,n.jsx)(e.span,{style:{color:"var(--base0B)"},children:"dragons"}),'"',">Dragons",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"6",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"Text"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"slot"}),(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),'"',(0,n.jsx)(e.span,{style:{color:"var(--base0B)"},children:"description"}),'"',">Select your pets.",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"7",children:["",` `]})]})}),` `,(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:'slot="description"'})," prop is letting the ",(0,n.jsx)(e.code,{children:"Text"}),` component know that it needs to look for special props that are meant to be used as a description. Those special props will be provided by the `,(0,n.jsx)(e.code,{children:"CheckboxGroup"})," component."]}),` `,(0,n.jsxs)(e.p,{children:["Essentially, the ",(0,n.jsx)(e.code,{children:"CheckboxGroup"}),` component will say: "here's a bucket of props for any component that takes on the role of a description." The `,(0,n.jsx)(e.code,{children:"Text"}),` component will then say: "Oh look, I've got a `,(0,n.jsx)(e.code,{children:"slot"})," prop that matches the ",(0,n.jsx)(e.code,{children:"description"}),` slot, so I'll use these props to render myself."`]}),` `,(0,n.jsx)(e.p,{children:"All of this is built using context."}),` `,(0,n.jsxs)(e.p,{children:[`What this enables is a powerfully flexible capability to have components which are highly reusable. The `,(0,n.jsx)(e.code,{children:"Text"}),` component can be used in many different contexts, and it can adapt to the needs of the parent component. For example, it's also used in react-aria's `,(0,n.jsx)(e.code,{children:"ComboBox"}),` components. Here's the anatomy of a react-aria `,(0,n.jsx)(e.code,{children:"ComboBox"})," component:"]}),` `,(0,n.jsx)(e.pre,{"data-line-numbers":"true","data-lang":"tsx",style:{color:"var(--base05)",backgroundColor:"var(--base00)"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"1",children:["<",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"ComboBox"}),">",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"2",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"Label"})," />",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"3",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"Input"})," />",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"4",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"Button"})," />",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-highlight":"true","data-line-number":"5",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"Text"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"slot"}),(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),'"',(0,n.jsx)(e.span,{style:{color:"var(--base0B)"},children:"description"}),'"'," />",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"6",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"FieldError"})," />",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"7",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"Popover"}),">",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"8",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"ListBox"}),">",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"9",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"ListBoxItem"}),">",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-highlight":"true","data-line-number":"10",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"Text"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"slot"}),(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),'"',(0,n.jsx)(e.span,{style:{color:"var(--base0B)"},children:"label"}),'"'," />",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-highlight":"true","data-line-number":"11",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"Text"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"slot"}),(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),'"',(0,n.jsx)(e.span,{style:{color:"var(--base0B)"},children:"description"}),'"'," />",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"12",children:[" ",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"13",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"Section"}),">",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"14",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"Header"})," />",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"15",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"ListBoxItem"})," />",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"16",children:[" ",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"17",children:[" ",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"18",children:[" ",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"19",children:["",` `]})]})}),` `,(0,n.jsxs)(e.p,{children:["This can be used to apply appropriate ",(0,n.jsx)(e.code,{children:"aria-"})," attributes as well as ",(0,n.jsx)(e.code,{children:"id"}),`s and event handlers. You might think about it as a way to implement compound components in a way that doesn't require an individual component for every single use case.`]}),` `,(0,n.jsx)(e.h2,{children:"Implementation"}),` `,(0,n.jsx)(e.p,{children:`Folks tend to struggle with this one a bit more than the rest, but it's simpler than it seems.`}),` `,(0,n.jsx)(e.p,{children:"The basic concept is your root component creates collections of props like so:"}),` `,(0,n.jsx)(e.pre,{"data-line-numbers":"true","data-lang":"tsx",style:{color:"var(--base05)",backgroundColor:"var(--base00)"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"1",children:[(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"function"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"NumberField"}),"({ ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"children"})," }",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," { ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"children"}),(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"React"}),".",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"ReactNode"})," }) {",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"2",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base03)"},children:"// setup state/events/etc"}),` `]}),(0,n.jsx)(e.span,{className:"codeblock-line","data-line-number":"3",children:` `}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"4",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"slots"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," {",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"5",children:[" label: { htmlFor: ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"inputId"})," },",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"6",children:[" decrement: { onClick: ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"decrement"})," },",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"7",children:[" increment: { onClick: ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"increment"})," },",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"8",children:[" description: { id: ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"descriptionId"})," },",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"9",children:[" input: { id: ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"inputId"}),", ","'",(0,n.jsx)(e.span,{style:{color:"var(--base0B)"},children:"aria-describedby"}),"'",": ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"descriptionId"})," },",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"10",children:[" }",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"11",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"return"})," <",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"SlotContext"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"value"}),(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"slots"}),(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),">",(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"children"}),(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),"",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"12",children:["}",` `]})]})}),` `,(0,n.jsxs)(e.p,{children:["Then the consuming components use the ",(0,n.jsx)(e.code,{children:"use(SlotContext)"}),` to get access to the `,(0,n.jsx)(e.code,{children:"slots"})," object and pluck off the props they need to do their job:"]}),` `,(0,n.jsx)(e.pre,{"data-line-numbers":"true","data-lang":"tsx",style:{color:"var(--base05)",backgroundColor:"var(--base00)"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"1",children:[(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"function"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"Input"}),"(",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"props"}),") {",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"2",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"props"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"useSlotProps"}),"(",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"props"}),", ","'",(0,n.jsx)(e.span,{style:{color:"var(--base0B)"},children:"input"}),"'",")",` `]}),(0,n.jsx)(e.span,{className:"codeblock-line","data-line-number":"3",children:` `}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"4",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"return"})," <",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"input"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),">",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"5",children:["}",` `]})]})}),` `,(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:"useSlotProps"}),` hook is responsible for taking the props that have been specified and combining it with those from the `,(0,n.jsx)(e.code,{children:"SlotContext"})," for the named slot."]})]})}function h(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(d,{...a})}):d(a)}function g(a,e){throw new Error("Expected "+(e?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return f(A);})(); ;return Component;

04. Slots/Elaboration