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