Shadow DOM is still somewhat shady
I was recently building a web app using Polymer 2.0 and need to include some SVG assets for wider resolution support. As you may know, Polymer fully supports native shadow DOM with the 2.0 version. When using a shadow DOM context, the style tag will apply the given CSS rules inside the shadow context. This introduces some problems with an inline SVG image. Consider this example; <svg width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1080 360"> <defs> <style>.a{fill:none;}.b{opacity:0.3;}.c{fill:#ddb464;}.d{clip-path:url(#a);} </style> <clipPath id="a"><rect class="a" x="129" y="112" width="822" height="216" rx="40" ry="40"/> </clipPath> </defs> <rect class="b" x="143" y="129" width="820" h...