MicrosoftEdge / MSEdgeExplainers

Home for explainer documents originated by the Microsoft Edge team
Creative Commons Attribution 4.0 International
1.31k stars 213 forks source link

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

Open dgp1130 opened 1 month ago

dgp1130 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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.