:Host CSS equivalent for VueJS Templates?
There is no equivalent for Angular's :host in Vue.
The closest you are gonna get is by using CSS module.
Demo: App.vue in https://codesandbox.io/s/o4orw9nz35
<template> <div id="app" :class="$style.container"> <p class="red">p tag</p> <div class="blue">div tag</div> </div></template><style lang="scss" module>.container :global { .red { color: red; } .blue { color: blue; }}</style>Note how the .container class is used as $style.container as class in the root div.
CSS module will generate unique class name for .container, making it impossible to have class name collisions.
What does :global do?
CSS module transform the CSS class name into something unique by default.
for e.g. .container will be transformed into something like .container_7ba5bd90 when used as $style.container.
To avoid this transformation on certain classes, use :global to wrap them.
(Explanation for :global can be found here.)