<!DOCTYPE html>
<div></div>
<svg height="0">
<linearGradient id="g">
<stop stop-color="red"/>
</linearGradient>
</svg>
<script>
var div = document.querySelector('div');
var shadowRoot = div.attachShadow({ mode: 'closed' });
shadowRoot.innerHTML = '<svg><rect width="100" height="100" fill="url(#g) green"/></svg>';
</script>