[{"data":1,"prerenderedAt":268},["ShallowReactive",2],{"term-s\u002Fslot":3,"related-s\u002Fslot":254},{"id":4,"title":5,"acronym":6,"body":7,"category":236,"description":237,"difficulty":238,"extension":239,"letter":240,"meta":241,"navigation":179,"path":242,"related":243,"seo":248,"sitemap":249,"stem":252,"subcategory":6,"__hash__":253},"terms\u002Fterms\u002Fs\u002Fslot.md","Slot",null,{"type":8,"value":9,"toc":230},"minimark",[10,15,19,23,26,30,219,223,226],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"A slot is a placeholder in a component where a parent can inject its own custom content. Imagine a card component with a slot — one time you put a chart in it, another time a table. The card doesn't care what goes in the slot, it just renders it.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Slots are a content distribution mechanism that allow parent components to inject template content into specific locations in a child component. Vue has named slots for multiple injection points and scoped slots that expose child data to the parent's slot content.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Card.vue -->\n\u003Ctemplate>\n  \u003Cdiv class=\"card\">\n    \u003Cslot name=\"header\" \u002F>\n    \u003Cdiv class=\"body\">\n      \u003Cslot \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003C!-- Usage -->\n\u003CCard>\n  \u003Ctemplate #header>\u003Ch2>Title\u003C\u002Fh2>\u003C\u002Ftemplate>\n  \u003Cp>Card body content here.\u003C\u002Fp>\n\u003C\u002FCard>\n","vue","",[38,39,40,49,63,90,114,134,144,154,164,174,181,187,197,204,210],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u003C!-- Card.vue -->\n",[41,50,52,56,60],{"class":43,"line":51},2,[41,53,55],{"class":54},"sMK4o","\u003C",[41,57,59],{"class":58},"swJcz","template",[41,61,62],{"class":54},">\n",[41,64,66,69,72,76,79,82,86,88],{"class":43,"line":65},3,[41,67,68],{"class":54},"  \u003C",[41,70,71],{"class":58},"div",[41,73,75],{"class":74},"spNyl"," class",[41,77,78],{"class":54},"=",[41,80,81],{"class":54},"\"",[41,83,85],{"class":84},"sfazB","card",[41,87,81],{"class":54},[41,89,62],{"class":54},[41,91,93,96,99,102,104,106,109,111],{"class":43,"line":92},4,[41,94,95],{"class":54},"    \u003C",[41,97,98],{"class":58},"slot",[41,100,101],{"class":74}," name",[41,103,78],{"class":54},[41,105,81],{"class":54},[41,107,108],{"class":84},"header",[41,110,81],{"class":54},[41,112,113],{"class":54}," \u002F>\n",[41,115,117,119,121,123,125,127,130,132],{"class":43,"line":116},5,[41,118,95],{"class":54},[41,120,71],{"class":58},[41,122,75],{"class":74},[41,124,78],{"class":54},[41,126,81],{"class":54},[41,128,129],{"class":84},"body",[41,131,81],{"class":54},[41,133,62],{"class":54},[41,135,137,140,142],{"class":43,"line":136},6,[41,138,139],{"class":54},"      \u003C",[41,141,98],{"class":58},[41,143,113],{"class":54},[41,145,147,150,152],{"class":43,"line":146},7,[41,148,149],{"class":54},"    \u003C\u002F",[41,151,71],{"class":58},[41,153,62],{"class":54},[41,155,157,160,162],{"class":43,"line":156},8,[41,158,159],{"class":54},"  \u003C\u002F",[41,161,71],{"class":58},[41,163,62],{"class":54},[41,165,167,170,172],{"class":43,"line":166},9,[41,168,169],{"class":54},"\u003C\u002F",[41,171,59],{"class":58},[41,173,62],{"class":54},[41,175,177],{"class":43,"line":176},10,[41,178,180],{"emptyLinePlaceholder":179},true,"\n",[41,182,184],{"class":43,"line":183},11,[41,185,186],{"class":47},"\u003C!-- Usage -->\n",[41,188,190,192,195],{"class":43,"line":189},12,[41,191,55],{"class":54},[41,193,194],{"class":58},"Card",[41,196,62],{"class":54},[41,198,200],{"class":43,"line":199},13,[41,201,203],{"class":202},"sTEyZ","  \u003Ctemplate #header>\u003Ch2>Title\u003C\u002Fh2>\u003C\u002Ftemplate>\n",[41,205,207],{"class":43,"line":206},14,[41,208,209],{"class":202},"  \u003Cp>Card body content here.\u003C\u002Fp>\n",[41,211,213,215,217],{"class":43,"line":212},15,[41,214,169],{"class":54},[41,216,194],{"class":58},[41,218,62],{"class":54},[11,220,222],{"id":221},"when-youll-hear-this","When You'll Hear This",[16,224,225],{},"\"Use a named slot for the modal's footer so consumers can put their own buttons there.\" \u002F \"Scoped slots let the child expose data back up to the parent's slot content.\"",[227,228,229],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":51,"depth":51,"links":231},[232,233,234,235],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":221,"depth":51,"text":222},"frontend","A slot is a placeholder in a component where a parent can inject its own custom content.","intermediate","md","s",{},"\u002Fterms\u002Fs\u002Fslot",[244,245,246,247],"Component","Props","Vue","Template",{"title":5,"description":237},{"changefreq":250,"priority":251},"weekly",0.7,"terms\u002Fs\u002Fslot","jhmymE4SKxZnKDwOp5DT_AxquCMBpNrW_UTEmkBM9ic",[255,259,262,265],{"title":244,"path":256,"acronym":6,"category":236,"difficulty":257,"description":258},"\u002Fterms\u002Fc\u002Fcomponent","beginner","A component is a self-contained LEGO brick for your UI.",{"title":245,"path":260,"acronym":6,"category":236,"difficulty":257,"description":261},"\u002Fterms\u002Fp\u002Fprops","Props are how you pass information INTO a component, like giving a coffee machine its settings.",{"title":247,"path":263,"acronym":6,"category":236,"difficulty":257,"description":264},"\u002Fterms\u002Ft\u002Ftemplate","A template is the HTML part of your component — the blueprint for what it looks like. In Vue you write it inside a \u003Ctemplate> tag. In React you return JSX.",{"title":246,"path":266,"acronym":6,"category":236,"difficulty":257,"description":267},"\u002Fterms\u002Fv\u002Fvue","Vue is a JavaScript framework for building interactive UIs. It's famous for being easy to pick up — HTML developers feel right at home.",1776518313844]