Is there a way to isolate SVG styles?

Question

<svg>
    <defs>
        <style>
             .test {
                 fill: red;
             }
        </style>
    </defs>
    <circle class="test"></circle>
</svg>
<div class="test">test</div>

How to make works class .test only for SVG element. Is there a way to isolate SVG classes/styles?

Answer 1

Yes, by putting the SVG in the shadowDOM of a W3C standard Web Component

• https://developers.google.com/web/fundamentals/web-components/shadowdom

supported in all modern Browsers.