vue 3.0 子组件使用了 teleport 标签，父组件使用 deep 样式穿透不生效

Question

子组件：

<template>
  <teleport to="body">
    <div>
      <h4>示例</h4>
    </div>
  </teleport>
</template>

父组件：

<style lang="less" scoped>
:deep(h4) {
  color: red !important;
}
</style>

组件封装过程中突然发现的这个问题，请问有什么比较好的解决方法？

具体场景：子组件是弹窗基础公共组件，所以封装使用了teleport标签，默认to指向body，在父组件引用时有时会有微调内部样式的需求。

Answer 1

自问自答吧，封装个disabled属性差不多就够用了

Answer 2

我也碰到了这个问题，项目中用teleport封装的公共组件内样式不能进行修改，使用deep穿透由于teleport中的to特性确实无法实现修改样式，但是可以通过JavaScript操作dom实现对其样式的微调。