javascript - Vue.js 2, Using custom component tag names in 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>
is possible use component tags regular html tag styling purposes i've written down there in lives { }
?
see that writing <lives class="lives">
, using .lives { }
in css works seems kinda redundant, rather ommit adding aditional classes if it's possible use component tag.
understand vue compiles <lives>
html code , there no "lives" tag css use after it's compiled, still wondering.
vue component's name has no relationship css rule, it's template
does.
vue component has template
property, contains html tag. , also, can use custom html tag in template
. example:
template: `<lives class="lives">{{a}}</lives>`
so can define css rule lives
tag.
Comments
Post a Comment