<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>
Is it feasible to utilize component tags as regular HTML tags for styling purposes, such as shown in the lives { } section?
I have observed that using <lives class="lives"> and applying .lives { } in CSS can achieve the desired effect, but this approach seems somewhat redundant. I would prefer to avoid adding additional classes if possible and simply use the component tag itself.
I realize that Vue compiles <lives> into HTML code and that there is no corresponding "lives" tag for CSS to reference post-compilation, but the thought still intrigues me.