Re: [csswg-drafts] Proposal: CSS @sheet (#11509)

@KurtCattiSchmidt:

> "To allow these styles to be defined inline, `@sheet` seems like a better solution"....
... This won't change the underlying caching behavior for external files, but one of the reasons we're so interested in inline style definitions is to avoid this type of FOUC.

I think I am just reiterating that same TAG review [comment](https://github.com/w3ctag/design-reviews/issues/1000#issuecomment-2433471327), which also said as to "why `<link>` or @import cannot be used for sharing styles across shadow roots", "perhaps the issue can be addressed at the root, by specifying that these requests MUST be deduplicated, either by default (if web compatible) or with a certain flag set".

But even more fundamentally, there seems to be an expectation that needs to be clearly specified across [@sheets](https://github.com/w3c/csswg-drafts/issues/11509) and [declarative CSS modules](https://github.com/whatwg/html/issues/10673) that multiple references from anywhere to a DOM element (similarly for multiple references to a network resource, i.e. a file) should refer to the same copy, instance, or original source of the underlying resource, not (potentially) different ones. 

That seems to be the essence of "sharing" styles and potentially other resource types.

Like another comment in that TAG review said in [a somewhat different context](https://github.com/w3ctag/design-reviews/issues/1000#issuecomment-2445449878):
 "... that there is an existing behavior of copy-on-write behavior when the same stylesheet is loaded from multiple places. e.g. if I `<link>` a.css twice, there's one instance in RAM ..."

 This is indeed how SVG `<use>`, which can reference a DOM element in the same document (as well as a network resource), already behaves:

 ```html
 <svg
    id="svgWithMyCircle"
    viewBox="0 0 30 10"
    xmlns="http://www.w3.org/2000/svg"
>
    <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue" />
</svg>
<svg id="svgWithUse" viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
    <!-- Reference to circle element -->
    <use href="#myCircle" fill="yellow" />
</svg>
<button onclick="ChangeOriginalMyCircle()">Change Original MyCircle</button>
<script>
    function ChangeOriginalMyCircle() {
    const myCircle = document.getElementById("myCircle");
    myCircle.setAttribute("stroke", "red");
    }
</script>
```

In the example above, clicking the button changes the stroke color of the circle in both the first and second SVG. This is because the `<use>` element references the same instance of the circle element in the first SVG.

So I am also suggesting that in a [new proposal](https://github.com/w3c/csswg-drafts/issues/11509#issuecomment-2641472010), `<link rel="stylesheet" href="#sheet" />` should behave similarly and be backed by the original element itself.

Note that means that `import sheet from '#sheet' with {type: "css"}` should also be backed by the original element itself, which is a bit different from how importing a network resource necessarily refers to a singleton instance.

Otherwise, `<link rel="stylesheet" href="#sheet" />` and `import sheet from '#sheet' with {type: "css"}` could refer to different things in the same document.

-- 
GitHub Notification of comment by robglidden
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11509#issuecomment-2649233031 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 10 February 2025 21:05:08 UTC