Skip to content

[Declarative Shadow DOM Style Sharing] Multiple style sheets with commas #886

Open
@dgp1130

Description

The proposal allows multiple module specifiers in in adoptedstylesheets like so:

<my-element>  
  <template shadowrootmode="open" adoptedstylesheets="/foo.css, /bar.css">  
    <!-- ... -->  
  </template>  
</my-element>

This indicates that comma (or comma-space) is a delimiter between multiple URLs, however commas and spaces are generally allowed in URLs:

<link rel="stylesheet" href="/foo, bar, baz.css">

This makes a request for /foo,%20bar,%20baz.css. How would this proposal disambiguate between an adoptedstylesheets value with a single URL containing a comma-space or multiple stylesheets?

Potentially we could use space as the delimiter and require any spaces in the URL to be encoded as %20, though it's weird that this particular attribute would work that way and be different from <link>. I wish we could just repeat the attribute like <div adoptedstylesheets="/foo.css" adoptedstylesheets="/bar.css"></div>, but unfortunately the DOM doesn't allow repeated attributes.

Is there any precedent in other HTML elements which allow multiple values based on some delimiter? I can't imagine this is the first time it's been wanted.

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions