[{"data":1,"prerenderedAt":83},["ShallowReactive",2],{"note-\u002Fnotes\u002Fvue-scoped-styles-leak-into-child-roots\u002F":3},{"id":4,"title":5,"body":6,"date":69,"description":70,"extension":71,"meta":72,"minutes":73,"navigation":74,"path":75,"seo":76,"stem":77,"tags":78,"__hash__":82},"notes\u002Fnotes\u002Fvue-scoped-styles-leak-into-child-roots.md","Vue scoped styles leak into child component root elements",{"type":7,"value":8,"toc":65},"minimark",[9,35,50],[10,11,12,13,17,18,22,23,26,27,30,31,34],"p",{},"Today I learned the hard way: in Vue, a child component's ",[14,15,16],"strong",{},"root element","\nreceives the parent's ",[19,20,21],"code",{},"data-v-*"," scoped attribute too. So if your child\ntakes a ",[19,24,25],{},"variant"," prop and binds it as a class — say ",[19,28,29],{},"hero"," — and the\nparent page happens to have a scoped rule for ",[19,32,33],{},".hero",", that rule lands on\nyour component's root.",[10,36,37,38,41,42,45,46,49],{},"In my case a ",[19,39,40],{},"BlobField"," component with ",[19,43,44],{},"variant=\"hero\""," got captured by\nthe page's ",[19,47,48],{},".hero { position: relative; overflow: hidden }"," section rule,\nand every blob collapsed into a 280px band at the top of the section.",[10,51,52,53,56,57,60,61,64],{},"The fix is boring and absolute: ",[14,54,55],{},"namespace variant classes"," (",[19,58,59],{},"v-hero",",\n",[19,62,63],{},"v-cta",") so they can never collide with layout class names. Scoped styles\nare scoped — except at the one boundary where they aren't.",{"title":66,"searchDepth":67,"depth":67,"links":68},"",2,[],"2026-08-11","A child component's root element inherits the parent's scoped attribute — name your variant classes accordingly.","md",{},1,true,"\u002Fnotes\u002Fvue-scoped-styles-leak-into-child-roots",{"title":5,"description":70},"notes\u002Fvue-scoped-styles-leak-into-child-roots",[79,80,81],"Vue","CSS","TIL","5bwa12qU-5CiNb-4_ehS781335gfDhyQFJ0U-AKuEsk",1786455791993]