MicrosoftEdge / MicrosoftEdge/MSEdgeExplainers
[Declarative Shadow DOM Style Sharing] Multiple style sheets with commas
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 1.4k
- Forks
- 286
- Avg merge
- 3d 1h
- Merged PRs (30d)
- 8
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.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reading the adoptedstylesheets proposal described in the issue and compare its comma-delimited values with HTML link href handling. Review precedents for delimiter-based multiple values; done means resolving how URLs containing commas or spaces are disambiguated and documenting the resulting proposal decision.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html
- Domain
- web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100