Как сохранить стили пользовательского агента для SVG и его дочерних элементов в этом конкретном сценарии?

Question

Я участвую в работе над виджетом чата, который будет размещен на сайтах многих наших клиентов.Это текущий сценарий -

При стилизации виджета мы должны убедиться, что стили:

1. не просачиваются из виджета (это легко сделать, используя интервал имен всехселекторы с классом-оболочкой виджета чата)
2. не проникают в виджет

В случае № 2 мы можем использовать методику, описанную в этом вопросе Как изолировать div от общедоступных стилей CSS? unset для детей в отличие от initial позволит наследовать свойства.

.my-widget {
  all: initial;
}

.my-widget * {
  all: unset;
}

Теперь проблема в том, что у меня есть SVGзагрузчик внутри виджета, который выглядит не так, как ожидалось. Стили пользовательского агента для svg и связанных с ним элементов стерты (не установлены) из-за использования описанной выше техники.Итак, в основном, мне нужно защитить только svg, поэтому я изменил второй блок, чтобы попробовать это:

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

Но это защитит только svg, а не его дочерние элементы.!

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

^ Это невозможно, потому что :not принимает только простой селектор
(https://css -tricks.com / almanac / селекторы / n / not / )
(https://www.w3.org/TR/selectors/#simple)

Как сохранить стили пользовательского агента для svg и его элементов?