HTML Element styling not working in scoped style - html

Question

For some reason my element styling isn't working when using scoped. When inspecting the element the styling is not applied when using scoped. I need to use scoped because I want the styling only be applied within this component. I'm using nuxt.js, no idea if this has anything to do with the problem.
Not working:
<style scoped>
a {
color: red !important;
text-decoration: underline !important;
}
</style>
Working:
<style>
a {
color: red !important;
text-decoration: underline !important;
}
</style>
Any ideas?

Answer 1

As explained in the relevant documentation, scoped CSS applies a data- attribute to all selectors in the provided CSS so that it only applies to the elements of the component, not outside of it, nor to nested sub-components.
For example, with this markup:
<app>
<a>outside link</a>
<Parent>
<a>parent link</a>
<Child>
<a>child link</a>
</Child>
</Parent>
</app>
scoped CSS of <Parent> will only affect parent link and will not affect the outside link nor the child link.
From what you're describing, you are trying to style a sub-component link.
To make your scoped CSS selectors affect deeply (apply to sub-components as well) you have to use the deep >>> combinator:
<style scoped>
* >>> a {
color: red;
text-decoration: underline;
}
</style>
To see it in action, consider this example.