I'm having huge problems animating an ellipsis icon to jiggle the little dots up and down in a wave. I suspect that because its in the shadow DOM I can't target the individual path elements specifically, however is there a work-around?
DOM looks like this:
<svg class="icon__vector">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-ellipsis"></use>
</svg>
Where the href link links to this SVG hardcoded in a sprite sheet in which I can edit if needed.
<svg id="icon-ellipsis" width="100%" height="100%" viewBox="0 0 24 24">
<path className="icon-ellipsis-dotone" d="M6 11.59c0 1.105-0.895 2-2 2s-2-0.895-2-2c0-1.105 0.895-2 2-2s2 0.895 2 2z"></path>
<path className="icon-ellipsis-dottwo" d="M14 11.59c0 1.105-0.895 2-2 2s-2-0.895-2-2c0-1.105 0.895-2 2-2s2 0.895 2 2z"></path>
<path className="icon-ellipsis-dotthree" d="M22 11.59c0 1.105-0.895 2-2 2s-2-0.895-2-2c0-1.105 0.895-2 2-2s2 0.895 2 2z"></path>
</svg>
EDIT:
So i have an ellipsis icon something like this "O O O" and i its loaded in with a <use> tag and i want to be able to target each individual dot and animate them differentely. I can edit the master sprite sheet, use javascript or css however no jquery.
Problem is that there is no way to target the individual paths because they exist in the shadow DOM