Vue.js 2, css에서 사용자 지정 구성 요소 태그 이름 사용?

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>

일반적인 HTML 태그와 같이 구성 요소 태그를 스타일링 용도로 사용할 수 있는가?lives { }?
나는 저 글씨를 본다.<lives class="lives">사용법.lives { }css는 작동하지만 다소 중복된 것처럼 보인다. 만약 구성요소 태그만 사용할 수 있다면, 추가 클래스를 추가하기를 원한다.
나는 Vue가 편찬한 것을 이해한다.<lives>HTML 코드로 변환하여 css가 컴파일된 후 사용할 "live" 태그가 없는 경우. 그러나 여전히 궁금하다.

부에 컴포넌트의 이름은 css 규칙과 관계가 없지만,template한다

Vue 구성 요소:template속성, html 태그가 들어있다. 또한 당신은 html 태그를template. 예:

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

이제 css 규칙을 정의할 수 있다lives꼬리표를 달다

vue-custom-element를 사용할 수 있음:

https://github.com/karol-f/vue-custom-element

먼저 구성 요소를 다음에 등록하십시오.

Vue.customElement('widget-vue', {
  props: [
    'prop1',
    'prop2',
    'prop3'
  ],
  data: {
    message: 'Hello Vue!'
  },
  template: '<p>{{ message }}, {{ prop1  }}, {{prop2}}, {{prop3}}</p>'
});

그런 다음 다음을 수행할 수 있다.

widget-vue {
  display: block;
  background: red;
  ...
}

단일 파일 구성 요소를 등록하려면 다음과 같이 직접 등록하십시오.

import TopBar from '@/components/core/TopBar'
Vue.customElement('top-bar', TopBar)

도움이 되길 바래, 건배!

참조URL: https://stackoverflow.com/questions/45690472/vue-js-2-using-custom-component-tag-names-in-css