1

I am involved in working on a chat widget which is going to be featured in many of our customers' websites. This is the current scenario-

When styling the widget, we need to ensure that styles:

  1. do not leak out of the widget (this is easily done by name-spacing all selectors with the chat widget wrapper class)
  2. do not leak into the widget

In the case of no.2, we can use the technique as discussed in this question How To Isolate a div from public CSS styles? The unset for children as opposed to initial will allow for inheritance of properties.

.my-widget {
  all: initial;
}

.my-widget * {
  all: unset;
}

Now the problem is that I have an SVG loader inside the widget which does not look as expected- The user-agent styles for the svg and its associated elements is all erased (unset) due to using the technique above. So basically, what I need to do is protect just the svg- so I modified the second block to try this:

.my-widget *:not(svg) {
  all: unset;
}

But that will protect only the svg and not its children!

.my-widget *:not(svg):not(svg *) {
  all: unset;
}

^ That is not possible because :not accepts only a simple selector
(https://css-tricks.com/almanac/selectors/n/not/)
(https://www.w3.org/TR/selectors/#simple)

How can I retain the user-agent styles for the svg and its elements?

mknd7
  • 21
  • 3

0 Answers0