Styling component nested in opened new window

I'm trying to style component mounted in new window but it seems like it's not readable. However inline styling is working. It is possible to style with style section in component?

Code explain: When component is mounted i'm opening new window with this component as argument.

<template>
  <!-- Inline styling works -->
  <div style="background-color: red" class="window-wrapper" v-if="open">
    <slot />
  </div>
</template>

<script>
export default {
  name: 'window-portal',
  props: {
    open: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      windowRef: null,
    }
  },
  watch: {
    open(newOpen) {
      if(newOpen) {
        this.openPortal();
      } else {
        this.closePortal();
      }
    }
  },
  methods: {
    openPortal() {
      this.windowRef = window.open("", "", "width=800,height=600,left=200,top=200");
      this.windowRef.addEventListener('beforeunload', this.closePortal);
      //here i'm opening new window with this compomnent
      this.windowRef.document.body.appendChild(this.$el);
    },
    closePortal() {
      if(this.windowRef) {
        this.windowRef.close();
        this.windowRef = null;
        this.$emit('close');
      }
    }
  },
  mounted() {
    if(this.open) {
      this.openPortal();
    }
  },
  beforeUnmounted() {
    if (this.windowRef) {
      this.closePortal();
    }
  }
}
</script>

<style scoped>
.body {
    box-sizing: border-box;
}
/* here styling is not working */
.window-wrapper {
  background-color: red;
}
</style>

Also components passed as slot cannot read styles from styles section.