When I referred to “styles” I was referring to classes.

If the same class was defined in a multiple SVGs under their respective <style/> elements, they would affect each other.

So sometimes if two icons were in the DOM at the same time, the one’s colours might look wrong since both had the same class names they were using.

Element ids were also not used so much for styling but instead for common SVG components (or something, I don’t know the terminology), so would similarly cause rendering issues.

Like I said it was especially common if the one started as a copy of the other in Illustrator.

The “fix” was to ensure unique element ids and class names, but this was an annoying extra step.

Using a shadow DOM for each icon which is an SVG circumvents the entire problem as they ignore anything outside their isolated DOM.