I need to style an entire component from another component where it is being used, in Vue 3 Vite. I'm trying to set a class to the component tag but it just isn't working.

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <HelloWorld />
</template>

<style scoped>
.hello {
  display: none;
}
<style>

HelloWorld.vue

<template>
 <header></header>
 <main v-bind="$attrs"></main>
<template>

CodePudding user response：

If the HelloWorld.vue component has a single root element like:

<template>
 <div >
   /* ... */
 </div>
</template>

your code should work without changing anything because the class hello will be added to hello-world. Read in the docs -> Fallthrough Attributes

If the HelloWorld.vue component has multiple root nodes like:

<header>...</header>
<main>...</main>
<footer>...</footer>

then no "automatic attribute fallthrough behavior" will happen and you will have to manually bound the $attrs because otherwise you will get a warning:

<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>

Read in the docs -> Attribute Inheritance on Multiple Root Nodes

What is the problem with mutli-root components?

Once you add many root nodes to a component, then suddenly the parent cannot change the child element styling in style scoped.