Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
A reversed ::deep for scoped css files
See original GitHub issueIs there an existing issue for this?
- I have searched the existing issues
Is your feature request related to a problem? Please describe the problem.
I have components where I would like different css depending on the parent element.
Describe the solution you’d like
Currently we have ::deep that from that selector on ignores the tag[xxx] decorations. It would be very helpful if there would be an inverse. E.g:
::global .dialog ::local div
That would translate to something like
.dialog div[tag]
Additional context
No response
Issue Analytics
- State:
- Created 2 years ago
- Reactions:2
- Comments:14 (8 by maintainers)
Top Results From Across the Web
Blazor ignoring scoped CSS in Components
To make styling work, I need to pass down the style with the ::deep CSS-Keyword. Otherwise, the style is not passed down to...
Read more >scope - CSS: Cascading Style Sheets - MDN Web Docs
The :scope CSS pseudo-class represents elements that are a reference point, or scope, for selectors to match against.
Read more >A Complete Guide to CSS Cascade Layers
This is your complete guide to CSS cascade layers, a CSS feature that allows us to define explicit contained layers of specificity.
Read more >Scoped CSS
When a <style> tag has the scoped attribute, its CSS will apply to elements ... If you want a selector in scoped styles...
Read more >How do you CSS with VueJS
The scoping is beneficial in the long run. Separate files isn't to hard to work with in the beginning but then you get...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I also would like support for a ::global to escape the scope.
In my case I have a component that includes an external component (a dropdown menu). The dropdown menu component injects a menu part into a html element outside of my component, so the menu part is not a descendent to my component. I am able to set a CSS class on the drop down menu component and therefore being able to target the menu in a non scoped css file. However, I would be much better to have CSS for the component in the same CSS file instead of spread out in multiple files.
If it was possible to use ::global to declare that the css selector that starts with ::global should not be scoped it is possible to mix scoped selectors with selectors that escapes the scope and have all css for the component in the same css file.
I think you understood correctly… I’m still a bit playing catch up with work. My son also got a complicated appendix removal, he has been in hospital for 6 weeks… so sorry I could not clarify more.
But @lonix1 understood my intention correctly I think. I specified the ::local because from the next tag then the [] component tag selector could be applied again. So the ::local would specify that the component tag selector should be applied not on the first element, but starting somewhere in the selector.