javascript - Vue.js 2，在CSS中使用自定义组件标签名称吗？

<template>
    <header>
        <hamburger></hamburger>
        <app-title></app-title>
        <lives></lives>
    </header>
</template>

<script>
export default {
    name: 'Titlebar',
    data() {
        return {

        }
    }
}
</script>

<style lang="scss" scoped>
    @import "../styles/variables";

    header {
        padding: $padding-titlebar;
        position: relative;
    }
    lives {
        position: absolute;
        right: 2.5vh;
    }
</style>

是否可以像我在lives { }中写的那样，使用任何常规html标记之类的组件标记来设计样式？
我看到在css中编写<lives class="lives">和使用.lives { }是可行的，但这似乎有点多余，如果可以使用component标记的话，我更愿意使用commit来添加其他类。
我知道VUE将<lives>编译成HTML代码，并且在编译后没有使用CSS的“生命”标签，但仍在疑惑。

最佳答案

Vue组件的名称与CSS规则没有关系，但它是template关系。
Vue组件有一个template属性，它包含HTML标记。此外，您还可以在template中使用自定义html标记。例如：

template: `<lives class="lives">{{a}}</lives>`

所以现在可以通过lives标记定义css规则。