'Vuetify: changing font-size of :host does not change rem behaviour [duplicate]

I have a web-component made with Vue.js 2 and Vuetify. I noticed that Vuetify uses rem as unit for classes such as "text-h6".

When I compile the webcomponent and my has font-size: 16px everything is fine:

The problem is that if the has font-size: 9px (and being a web-component this is not something I can decide), the result is this:

So I have read that I should add this code in the web-component:

:root, :host {
  font-size: 16px;
}

To make the rem refer to it, but it does not work, everything just refers to the <html> element.

This is more about my code:

vuetify.ts

import Vue from 'vue';
import Vuetify from 'vuetify/lib';

Vue.use(Vuetify);

export default new Vuetify({});

WebComponent.vue

<template>
    <v-app style="max-width: 440px">
      <v-main>
        <!-- some more stuff here -->
        <group-card />
      </v-main>
    </v-app>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

import "@/plugins/api";
import vuetify from "@/plugins/vuetify";

import { VApp, VMain } from "vuetify/lib";
import GroupCard from "@/components/group-card/GroupCard.vue";

@Component({
  vuetify,
  components: {
    VApp,
    VMain,
    GroupCard,
  },
})
export default class PncGroupRegistration extends Vue {
  /* SOME MORE STUFF HERE */
}
</script>

<style>
@import "vuetify/dist/vuetify.min.css";
</style>

<style>
/* This is because vuetify uses rem, so to make it behave everywhere the same I set the root font-size */
:host {
  font-size: 100px !important;
}

</style>

EDIT:

I received an answer that said that I should have used !important. Even with that it is not working.

This is a piece from the chrome dev-tools, where you can see that <html> has font-size: 9px, but in the :host it is overwritten with font-size: 100px!important.

The result I am still getting is this, in which the only non-valued-in-px values are "Group A" and the description.

EDIT 2:

I created this Github repo to reproduce the issue.

Solution 1:^[1]

Global font-size has higher specificity than :host

The brute way is !important

But its better to add Elements and increase Specificity in other shadowDOM CSS than :host

<style>
  *  {
    font-size: 10px;
  }
</style>

<my-component></my-component>
<br>
<my-component important></my-component>

<script>
  window.customElements.define('my-component', class extends HTMLElement {
    connectedCallback() {
      this.attachShadow({mode: 'open'})
          .innerHTML = `
          <style>
          :host{
           font-size:20px ${this.hasAttribute("important") ? "!important" : ""};
          }
          span { color: green; font-size:30px }
          </style>
          Hello <span>Fantastic</span> WebComponent`;
    }
  });
</script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'Vuetify: changing font-size of :host does not change rem behaviour [duplicate]

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]