search

elad2412 / the-new-css-reset

The New Simple and Lighter CSS Reset
https://elad2412.github.io/the-new-css-reset/
MIT License
2.26k stars 229 forks source link

Specificity on selector for `all: unset;` is greater than `::slotted()` #18

Closed Noleli closed 3 years ago

Noleli commented 3 years ago

When using this reset, I am unable to style slotted elements with ::slotted() without using !important.

Test example: https://codepen.io/noleli/pen/QWqWdWz

The CSS on lines 16 and 20 of the JavaScript should make both words red. Commenting out all: unset; in the reset fixes the problem (but negates the reset). Thanks!

elad2412 commented 3 years ago

I simplified your Issue, and I got that everything defined in any CSS will be stronger than the ::slotted().

This means that any CSS reset that you will use will cause similar problems.

I never used or heard about the slotted() feature until you mentioned it.

You can see my test in this CodePen. Any style which will be written will be more robust: https://codepen.io/elad2412/pen/583b70381e6842cac39d6c9ab2653086

Because of this, if it's a bug, it's a bug of web browsers and not something that can be done and fixed via any CSS reset.

(waiting several days before closing the issue to let you comment if you have any other info to add)

Noleli commented 3 years ago

Got it, thank you! I’ll have to figure a way around it.