Can I use scoped CSS while printing HTML page? (using Laravel and Vue.js)

Question

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?

I use Laravel 5 with many Vue Components. In one of them, I have the following scoped CSS

<style scoped>
    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;
    }
</style>

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.

$(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($('<div />', {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();
    });

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.

Answer 1

The way Vue works by default, your scoped CSS is transformed in the following way:

• The CSS selectors in your CSS get an additional attribute selector, and the CSS itself is inlined in a <style> tag into your page
• The HTML elements matching the selectors in your CSS are given the corresponding unique attribute

That way, the CSS rules are scoped to the specific HTML elements that match the unique attributes.

If you want your scoped styles to work in a different context than the original page, there's two things you need to make sure work:

• The HTML elements have the necessary attributes
• The <style> tag with the CSS with those attributes is present

From your description, it sounds like the latter at least is missing. A quick thing to try this out would be to also copy all <style> tags from your page when you're copying the external CSS, and see if that works.

Then you can determine whether that's good enough for you, or whether you actually want to see about just grabbing the styles you need (in case you have a lot of styles).