Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

css @import in Shadow DOM does not work #36

Open
valaxy opened this issue Apr 7, 2015 · 1 comment
Open

css @import in Shadow DOM does not work #36

valaxy opened this issue Apr 7, 2015 · 1 comment
Labels
enhancement help wanted

Comments

@valaxy
Copy link

valaxy commented Apr 7, 2015

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
@smhg
Copy link
Contributor

smhg commented Jan 14, 2018

This is similar to #32 and #53. Hopefully all these secondary ways to load CSS can be tackled together.

@smhg smhg mentioned this issue Jan 14, 2018
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement help wanted
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@smhg @valaxy