JSFiddle - React, Tailwind, and code Playground

by xowap

HTML

<div class="foo">
  Foo from outside
</div>

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="some-html" viewBox="0 0 200 200">
    
  <style>
    .foo {
      color: blue;
    }
  </style>
  
    <foreignObject x="0" y="0" width="200" height="200">
      <div xmlns="http://www.w3.org/1999/xhtml">
        <div class="foo">
          Foo from inside
        </div>
      </div>
    </foreignObject>
  </symbol>
  
  <use xlink:href="#some-html" x=0 y=0 />
</svg>

CSS

.foo {
  color: red;
}