css @import in Shadow DOM does not work

Shadow DOM is the new w3c standard about web technology. To show how does @import not work, see the example:

index.html

<body>
    <style type="text/css">
        @import "test1.css"; /* this will reload when change test1.css and is expected */
    </style>
    <div id="d1">I will reload</div>  

    <div id="wrap">
        <template id="tmp">
            <style type="text/css">
                @import "test2.css"; /* this will not reload when change test2.css and is not expected */
            </style>
            <div id="d2">I will not reload</div>
        </template>
    </div>

    <script type="text/javascript">
        var wrap = document.getElementById('wrap')
        var shadow = wrap.createShadowRoot()
        var template = document.getElementById('tmp')
        var clone = document.importNode(template.content, true)
        shadow.appendChild(clone)
    </script>
    <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</body>

test1.css

#d1 { background: red; }

test2.css

#d2 { background: yellow; }

Please only test in chrome, I don't know if any other browser support the ShadowRoot interface

I think the reason is really simple, it did not take wrap.shadowRoot into consideration

livereload / livereload-js

css @import in Shadow DOM does not work #36