Never thought I will ask something about CSS but here it is. When you develop a widget you can't rely on particular website's stylesheet so you want something like this:
.xxx-widget * {
all:revert;
}
But in case your widget has SVG icons:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 19 16"><path fill-rule="evenodd" d="M.009 16l18.658-8L.009 0 0 6.222 13.333 8 0 9.778z"></path></svg>
reverting all removes also and d
property from svg and icon disappears. Then I tried to modify reverting selector:
.xxx-widget *:not(svg) {
all:revert;
}
Above snippet does not work and at the same time browser does not recognize it as incorrect and a lot of styles are getting broke. Is there any approach to compose selector for everything except svg?
.xxx-widget *:not(svg)
does not work: Thed
element inside thesvg
is a descendant of your widget, and it does not have the tag namesvg
- so this selector applies to it.