@media print not working inside scoped style tag

Question

I am building a Nuxt app, not sure why this is not working only in scoped style tag.

This is what I usually do for style.

index.vue

...some code..
<script>
some code here 
</script> 
<style scoped>
.text1 {
overflow: auto;
}
</style>

The code above had no issue.

What I am trying to do is to print stuff inside dialog.

In detail, I have a page with long text (about 3 pages if printed) and button to open a dialog.

Inside dialog, there's some image & text and print button.

When I click the button, I want to print stuff inside dialog, but nothing else.

This is what I did:

<template>
...some text that I don't want to print..
<v-dialog>
 <v-container id="printable">
  image and text to print
 </v-container>
</v-dialog>
...
</template>
<script lang="ts">
export default Vue.extend({
methods: {
 print() {
      const modal = document.getElementById('printable');
      const cloned = modal!.cloneNode(true);
      let section = document.getElementById('print');

      if (!section) {
        section = document.createElement('div');
        section.id = 'print';
        document.body.appendChild(section);
      }

      section.innerHTML = '';
      section.appendChild(cloned);
      window.print();
    },
  },
})
</script>
<style scoped>
@media screen {
  #print {
    display: none;
  }
}

@media print {
  body * {
    visibility: hidden;
  }
  #print,
  #print * {
    visibility: visible;
  }
  #print {
    position: absolute;
    left: 0;
    top: 0;
  }
}
.text1 {
  overflow: auto;
}
</style>

When I clicked the print button, I got 3 pages of text that's supposed to be invisible. Also any image and text inside modal was gone.

Now, if I change <script scoped> to <script> everything works as expected. but I can't understand why.. (and I want to use scoped if possible as it's recommended)

Also, even with <script> I still get 3 pages (1st page with modal stuff then blank pages for 2nd and 3rd)

Does anyone know how to remove 2nd, and 3rd page?

Answer 1

For the first part, you probably need some deep selectors because I guess that you're targeting a nested component with v-dialog, you can see how to write it here: https://stackoverflow.com/a/55368933/8816585

So wrapping like

>>> .text1 {
  overflow: auto;
} 

As for the fact that it's printing but should not, it maybe comes down from the actual state this is in at the time you click on the button. Additional code may be useful here.

Not sure if it can help but packages like html2canvas may also help.
Here are some questions that I've once saw using this package, there are probably more.
They may be be more suited to print into a Vue environment.