Can I use scoped CSS while printing HTML page? (using Laravel and Vue.js)
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).