title: SVG shadow-root is closed
body: <p>I have tried to animate an svg-sprite with CSS.
  I’ve created a sprite and injected it from gulp:</p>
  
  <pre class="lang-javascript prettyprint-override"><code>gulp.task('svgstore', function () {
  var svgs = gulp
      .src('app/svg/*.svg')
      .pipe(svgmin(function (file) {
          return {
              plugins: [{
                  cleanupIDs: {
                      minify: true
                  }
              }]
          }
      }))        
      .pipe(svgstore({ inlineSvg: true }));
  
  function fileContents (filePath, file) {
      return file.contents.toString();
  }   
  
  return gulp
      .src('app/*.html')
      .pipe(inject(svgs, { transform: fileContents }))
      .pipe(gulp.dest('app/'))
  });
  </code></pre>
  
  <p>…and inserted images from the sprite to HTML:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;svg class="icon-ufo" &gt;
      &lt;use xlink:href="img/sprite.svg#ufo" aria-hidden="true"&gt;&lt;/use&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>And it works well, but the following image shows the shadow DOM is closed.</p>
  
  <p><a href="https://i.stack.imgur.com/vzdRO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/vzdRO.png" alt="svg shadow dom"></a> </p>
  
  <p>How I can to animate some styles of this SVG without JavaScript? But if JavaScript is the only way, how to do it better?  </p>