Shadow DOM for SVG

by Simon Hi

HTML

<svg>
  <symbol id="icon">
    <circle fill="var(--c1,#f00)" cx="1" cy="1" r="1" />
    <circle fill="var(--c2,#0f0)" cx="4" cy="1" r="1" />
    <circle fill="var(--c3,#00f)" cx="7" cy="1" r="1" />
  </symbol>
</svg>
<svg viewBox="0 0 8 2">
  <use href="#icon"></use>
</svg>
<svg viewBox="0 0 8 2">
  <use href="#icon"></use>
</svg>

CSS

svg:has(symbol) {
  display: none;
}

svg:last-of-type use {
  --c1: #0ff;
  --c2: #f0f;
  --c3: #ff0;
}