vue 子组件的根节点 样式 会受到父组件的影响，应该如何比较优雅的避免这个情况？

父组件:

<template>
    <div class="wrap">
    	<header></header>
        <main>
        	<ChildCompoment></ChildCompoment>
        </main>
    </div>
</template>
<style lang="scss" scoped>
	.wrap {
    	height: 100%;
    }
</style>

子组件:

<template>
    <div class="wrap"></div>
</template>
<style lang="scss" scoped>

</style>

上面的代码 子组件的 根节点元素（ class 为 wrap ）也会受到影响。

引用 Vue-Loader 文档的说明：

Child Component Root Elements
With scoped, the parent component's styles will not leak into child components. However, a child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS. This is by design so that the parent can style the child root element for layout purposes.

那这样的话，我要在子组件的根节点上写 class 就要十分小心，要考虑父组件是不是有用到了。
有什么比较优雅的方式，让我可以在每个组件里自由的写 class