[{"data":1,"prerenderedAt":147},["ShallowReactive",2],{"term-c\u002Fcss-scope":3,"related-c\u002Fcss-scope":132},{"id":4,"title":5,"acronym":6,"body":7,"category":113,"description":114,"difficulty":115,"extension":116,"letter":117,"meta":118,"navigation":119,"path":120,"related":121,"seo":126,"sitemap":127,"stem":130,"subcategory":6,"__hash__":131},"terms\u002Fterms\u002Fc\u002Fcss-scope.md","CSS @scope",null,{"type":8,"value":9,"toc":107},"minimark",[10,15,19,23,26,30,96,100,103],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 - The Vibe Check",[16,17,18],"p",{},"The @scope rule lets you tell CSS only style things inside this box, and stop at that boundary over there. No more fighting specificity wars or prefixing every class with .my-widget- just to avoid leaking styles into the rest of the page. It's like drawing chalk lines around your component and telling your styles to stay inside the lines.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"@scope is a CSS at rule that limits the reach of a set of style rules to a specific DOM subtree, with an optional donor element and a lower boundary where the scope stops applying. It provides native style encapsulation without relying on Shadow DOM, BEM naming conventions, or CSS Modules.",[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-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","@scope (.card) to (.card-footer) {\n  p { color: gray; }\n}\n\u002F* Only paragraphs inside .card, and before .card-footer, are affected *\u002F\n","css","",[38,39,40,57,83,89],"code",{"__ignoreMap":36},[41,42,45,49,53],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"s7zQu","@scope",[41,50,52],{"class":51},"sTEyZ"," (.card) to (.card-footer) ",[41,54,56],{"class":55},"sMK4o","{\n",[41,58,60,64,67,71,74,77,80],{"class":43,"line":59},2,[41,61,63],{"class":62},"sBMFI","  p",[41,65,66],{"class":55}," {",[41,68,70],{"class":69},"sqsOY"," color",[41,72,73],{"class":55},":",[41,75,76],{"class":51}," gray",[41,78,79],{"class":55},";",[41,81,82],{"class":55}," }\n",[41,84,86],{"class":43,"line":85},3,[41,87,88],{"class":55},"}\n",[41,90,92],{"class":43,"line":91},4,[41,93,95],{"class":94},"sHwdD","\u002F* Only paragraphs inside .card, and before .card-footer, are affected *\u002F\n",[11,97,99],{"id":98},"when-youll-hear-this","When You'll Hear This",[16,101,102],{},"\"We wrapped the third party widget's CSS in @scope so it can't bleed into our layout.\" \u002F \"@scope let us drop half our BEM prefixes.\"",[104,105,106],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}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 .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":59,"depth":59,"links":108},[109,110,111,112],{"id":13,"depth":59,"text":14},{"id":21,"depth":59,"text":22},{"id":28,"depth":59,"text":29},{"id":98,"depth":59,"text":99},"frontend","The @scope rule lets you tell CSS only style things inside this box, and stop at that boundary over there.","intermediate","md","c",{},true,"\u002Fterms\u002Fc\u002Fcss-scope",[122,123,124,125],"CSS Nesting","Cascade Layers","Shadow DOM","CSS Modules",{"title":5,"description":114},{"changefreq":128,"priority":129},"weekly",0.7,"terms\u002Fc\u002Fcss-scope","B36rzXSfomXMY2_JVAJmcvmvrvybZxF_bm0dKZYD6GE",[133,136,140,143],{"title":123,"path":134,"acronym":6,"category":113,"difficulty":115,"description":135},"\u002Fterms\u002Fc\u002Fcascade-layers","Cascade layers let you group CSS rules into named layers and control the order they apply.",{"title":125,"path":137,"acronym":6,"category":113,"difficulty":138,"description":139},"\u002Fterms\u002Fc\u002Fcss-modules","beginner","CSS Modules are like giving every CSS class a unique ID badge so they never clash with each other.",{"title":122,"path":141,"acronym":6,"category":113,"difficulty":138,"description":142},"\u002Fterms\u002Fc\u002Fcss-nesting","CSS Nesting finally brings the one feature everyone used Sass for directly into plain CSS.",{"title":124,"path":144,"acronym":6,"category":113,"difficulty":145,"description":146},"\u002Fterms\u002Fs\u002Fshadow-dom","advanced","Shadow DOM is like a force field around your component's internals.",1792528068982]