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.

LIXer · Accepted Answer · 2017-08-15 10:01:13Z

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, 2017 at 10:01

LIXer

3621 gold badge4 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Miloš Tomšik Over a year ago

I have already defined it:

<template> 	<svg class="lives"  width="32" height="29.6" fill="red"> 		<path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2 		c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/> 	</svg> </template>

But I was wondering if I could use the component as an independant entity.

Brian Sternari · Accepted Answer · 2018-08-25 15:48:24Z

0

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!

answered Aug 25, 2018 at 15:48

Brian Sternari

5014 silver badges10 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related