title: Can I use scoped CSS while printing HTML page? (using Laravel and Vue.js)
body: <p><strong>Should I put the scoped CSS in my master file, or should I change the print function in order to accomodate components' scoped CSS? In the second case, how should I change the JS function?</strong></p>
  
  <p>I use Laravel 5 with many Vue Components. In one of them, I have the following scoped CSS</p>
  
  <pre><code>&lt;style scoped&gt;
      td.not-purchased{
          background-color: darkgrey;
      }
      td.not-assigned-here{
          background-color: lightgreen;
      }
      td .checkbox{
          margin-top: 0;
          margin-bottom: 0;
          display: inline-block;
      }
  
      table th:nth-child(n+3),
      table td:nth-child(n+3){
          width: 50px;
          overflow-x: hidden;
          text-overflow: ellipsis;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>When printing the generated content, the function opens the content in a new page and copies the external CSS in the HEAD of the original document.</p>
  
  <pre><code>$(document).on('click', '.glyphicon[data-printselector]', function(){
          if($(this).data('printselector') != ''){
              // Print in new window
              let printHtml = $($(this).data('printselector')).clone(),
                  printWindow = window.open(),
                  waitTimeout;
  
              $(printWindow.document.body).append($('&lt;div /&gt;', {class: 'container'}).append(printHtml));
  
  
              $.each($('link'), function() {
                  $(printWindow.document.head).append($(this).clone());
  
                  clearTimeout(waitTimeout);
                  waitTimeout = setTimeout(function(){
                      // Here we ensure that CSS is loaded properly
                      printWindow.print();
                      printWindow.close();
                  }, window.changeFunctionTimeoutLong);
              });
  
          }
          else
              window.print();
      });
  </code></pre>
  
  <p>I know this could be done by putting the scoped CSS directly into the master CSS of my website, but I believe this goes against the whole point of having scoped CSS.</p>