Vue.js 2, Using custom component tag names in css?

Question

<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 possible to use component tags like any regular HTML tag for styling purposes like I've written down there in lives { }?
I see that that writing <lives class="lives"> and using .lives { } in css works but that seems kinda redundant, would rather like to ommit adding aditional classes if it's possible to just use component tag.
I understand that Vue compiles <lives> into HTML code and that there is no "lives" tag for css to use after it's compiled, but still wondering.

score 4 · Answer 1 · answered Aug 15 '17 at 10:01

4

Vue component's name has no relationship with css rule, but it's template does.

Vue component has a template property, it contains html tag. and also, you can use custom html tag in template. for example:

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

so now you can define css rule by lives tag.

answered Aug 15 '17 at 10:01

LIXer

342
1
4
10

I have already defined it: `` `` But I was wondering if I could use the component as an independant entity. – Miloš Tomšik Aug 15 '17 at 10:20

score 0 · Answer 2 · answered Aug 25 '18 at 15:48

You can use vue-custom-element:

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

First register your component with:

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

Then you can do:

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

If you want to register a Single File Component, register your own like this:

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

I hope it helps, Cheers!

Vue.js 2, Using custom component tag names in css?

2 Answers2