[Vuejs]-Vuetify – Overriding template slots with scoped CSS

by

0👍

If you inspect your html, you’ll notice that adding ID on <template> is not working. If you move your id="handlesearch" to actual html element inside your slot, which is in this case v-btn.

<template slot="append">
    <v-btn id="handlesearch">Sök</v-btn>
</template>

with next scoped style

<style scoped>
    #handlesearch {
      background: red;
    }
</style>

Produces next result:

Visual example

If I move id="handlesearch" to <template> as <template id="handlesearch"> style will not be applied since in my DOM there is no HTML element with that id.

Solution

Move your ID to actual element inside your slot, and add scoped style according to that.

Leave a comment