MicrosoftEdge / MSEdgeExplainers

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

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

Open dgp1130 opened 1 week ago

dgp1130 commented 1 week 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 20 hours 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