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

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

Open
dgp1130 opened this issue Oct 5, 2024 · 4 comments
Open

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

dgp1130 opened this issue Oct 5, 2024 · 4 comments

Comments

@dgp1130
Copy link

dgp1130 commented Oct 5, 2024

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.
@sorvell
Copy link

sorvell commented Oct 16, 2024

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.

Seems similar? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#srcset

@KurtCattiSchmidt
Copy link

KurtCattiSchmidt commented Oct 16, 2024 •
edited
Loading

Great question. From my understanding, for a comma to be valid in a URL, it needs to be encoded as %2C. So your example wouldn't be /foo,%20bar,%20baz.css, it would be /foo%2C%20bar%2C%20baz.css.

This way, the attribute can disambiguate between commas in the URL and separators between stylesheet module specifiers.

Update: I was mistaken, a non-URL-encoded comma is valid in a URL. srcset is a great reference though - it explicitly disallows non-URL-encoded commas at the start or end of the URL, which we'll need to do as well:

A [valid non-empty URL](https://html.spec.whatwg.org/multipage/urls-and-fetching.html#valid-non-empty-url) that does not start or end with a U+002C COMMA character (,), referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted.

https://html.spec.whatwg.org/multipage/images.html#srcset-attribute

@dgp1130
Copy link
Author

dgp1130 commented Oct 27, 2024

Interesting, I'm not a huge fan of that particularly unique constraint on URLs, but aligning with srcset is likely the right path here. Glad there's some precedent to draw from!

@dgp1130 dgp1130 closed this as completed Oct 27, 2024
@dgp1130
Copy link
Author

dgp1130 commented Oct 27, 2024

Actually, maybe we want to leave this open just as a reminder to update the spec to include this language around the comma? Up to you how to precisely handle this.

@dgp1130 dgp1130 reopened this Oct 27, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@sorvell @dgp1130 @KurtCattiSchmidt