父组件作用域类名意外作用于插槽子组件的技术咨询

First off, yes—this is intentional design behavior in Vue, and here's why:

When you use scoped styles, Vue adds a unique attribute (like data-v-abc123) to every element in the component's template, then modifies your CSS selectors to include that attribute (e.g., .foo[data-v-abc123]). This ensures styles only apply to the component's own elements.

But slot content is an exception: since your <Child /> is rendered as part of the parent's template, Vue adds the parent's scoped attribute to the child's root element. That means your parent's .foo[data-v-parent] selector matches the child's .foo element (which now has both data-v-parent and data-v-child attributes). If the selectors have equal specificity, the later-loaded style (or merged styles like margin-bottom) will take effect, breaking the isolation you expected.

Fixes Without Renaming Class Names #

1. Use CSS Modules in the Child Component

Swap out scoped for module in the child's style block. Vue will automatically hash the class names (e.g., Child_foo_xzy456), so the parent's .foo selector can't match it. This is the cleanest way to fully isolate styles:

<!-- Child -->
<template>
  <div :class="$style.foo"> This is a child </div>
</template>
<style module>
.foo { color: blue; }
</style>

2. Target Non-Slot Elements with :slotted() (Vue 3+)

If you're using Vue 3, use the :slotted() pseudo-class in the parent's scoped styles to separate styles for your own elements vs. slot content. Adjust the parent's styles to avoid leaking to the child:

<!-- Parent -->
<template>
  <div class="foo">
    <div>This is a parent</div>
    <slot></slot>
  </div>
</template>
<style scoped>
/* Apply margin to the parent container only */
.foo { margin-bottom: 10px; }
/* Target only the parent's internal text, not slot content */
.foo > :not(:slotted(*)) { color: red; }
</style>

3. Boost Specificity in the Child Component

Make the child's style selector more specific to override the parent's matching style. This works without changing the class name:

<!-- Child -->
<style scoped>
/* More specific selector beats the parent's equal-specificity rule */
div.foo { color: blue; }
</style>

(Note: Avoid !important unless absolutely necessary—it makes debugging harder down the line.)

4. Explicitly Scope Parent Styles (Advanced)

If you want the parent's .foo to only target its own element, you can reference the parent's auto-generated scoped attribute (though this is less maintainable, as the hash changes if the component file is modified):

<!-- Parent -->
<style scoped>
.foo[data-v-your-parent-hash] { color: red; margin-bottom: 10px; }
</style>

This ensures the selector only matches the parent's own .foo element, not the child's.

内容的提问来源于stack exchange，提问作者Michael Radionov