Open
Description
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