:Host CSS equivalent for VueJS Templates?

Question

I tried out Angular before switching to Vue and found the :host selector in their components to be very handy. The jist of this is that it applies the stylings for :host to the component itself.

Is there an equivalent of this that works with .vue files in they <style scoped></style> section?

Examples:

Using Scoped

Parent:

<template>
  <div class="host">
      <layout-header :open-nav="openNav" @toggle-open="toggleOpen"></layout-header>
      <layout-sidebar :open-nav="openNav"></layout-sidebar>
      <layout-content></layout-content>
      <layout-footer></layout-footer>   
  </div>
</template>

<style scoped>
  .host {
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
  }
</style>

Content:

(<layout-content>)

  <div class="host">
    stuff
  </div>

<style scoped>
  .host{
    flex: 1;
  }
</style>

Output:

(removing the header, footer, and sidebar for simplicities sake.)

This results in the header, sidebar, content, and footer inheriting the parents css if they have a .host class.

HTML:

<div data-v-238e7577="" class="host">
  <div data-v-7412829c="" data-v-238e7577="" class="host">stuff</div>
</div>

The CSS applied to the child element:

Answer 1

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.)