Skip to content

Possible bug/limitation of @import #3

@Malvoz

Description

@Malvoz

Hello @samthor!

Firstly I'd like to thank you for your efforts with this polyfill!

The W3C Maps For HTML Community Group is having issues with different third-party web maps loading in stylesheets with often times identical CSS selectors conflicting with each other. This means having to potentially resort to restructure and use iframes for each map implementation (across many pages) which will take some extra effort, but I was hoping to rely on scoped in this matter. I think I've found a bug, which I've managed to work around:

Given the following scenarios, the first one fails to load two.css whereas the second and third succeed:

<div>/* the style scope */
  <style scoped>
    @import url("https://cross-origin/one.css");
    @import url("https://cross-origin/two.css");
  </style>
</div>
scoped.min.js: 247
Uncaught DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to insert the rule.
    at replaceRule (http://localhost/scoped/scoped.min.js:247:12)
    at internalUpgrade (http://localhost/scoped/scoped.min.js:350:26)
    at internalUpgrade (http://localhost/scoped/scoped.min.js:393:11)
    at upgrade (http://localhost/scoped/scoped.min.js:477:5)
    at setup (http://localhost/scoped/scoped.min.js:537:7)

These work:

<div>
  <style scoped>
    @import url("https://cross-origin/one.css") /* no semicolon */
    @import url("https://cross-origin/two.css");
  </style>
</div>
<div>
  <style scoped>
    @import url("https://cross-origin/one.css");
  </style>
  <style scoped>
    @import url("https://cross-origin/two.css");
  </style>
</div>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions