vue3 component 속성 상속

//App.vue
<template>
  <MyBtn
    class="heropy"
    style="color:yellow;"
    title="helloworld">
    Banana
  </MyBtn>
</template>

<template>
  <div class="btn">
    <slot></slot>
  </div>
  <!-- 최상위요소에만 class heropy 가 적용되는데
       여러가지가 있으면  heropy 적용 x
       class, style 둘다 마찬가지임!

       상속에서 최상위 요소가 두개 이상이 되면 어떤 요소인지 알 수 없으므로 적용 안됨
        -->
  <h1
    :class="$attrs.class"
    :style="$attrs.style">
    첫번째
  </h1>
  <!-- 위,아래 동일 결과물! -->
  <h1 v-bind="$attrs">
    두번째
  </h1>
</template>

<script>
export default {
  //상속 false
  inheritAttrs: false,
  created(){
    console.log(this.$attrs)
  }
}
</script>