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

I read through all the discussion of the original Issue and now this one, and didn't see any talk around addressing this problem space using the existing `@container` capability with custom properties.

```css
file1.css - - -
@container style(--foo) {
  <style rules>
}
@container style(--bar) {
   <style rules>
} 
```
```html
file2.html - - -
...
<link rel="stylesheet" href="file1.css" />
...
<style>
  :root {
    --foo: "true" ;
  } 
</style>
...
<template shadowrootmode="open">
  <link rel="stylesheet" href="file1.css" />
  <style>
    :root {
      --bar: "true";
    } 
  </style>
  <span>I'm in the shadow DOM</span>
</template>
```

The mechanics would be a little different, but it sounds like it would still address the original raised problems in a similar fashion to `@sheet`. The names wouldn't be scoped to each individual declaring document, but given the similarity to class names coming from an external css file, that doesn't concern me too much. From a certain lens it might even be a feature that a single "name" could be "shared" across multiple files.

I'm new to the space so I'm sure there's lots of other implications I haven't thought of, so please chime in with more trade-offs (or gaps?) to consider.

(*It would still need a way for a shadow DOM to reference a style defined in the light DOM, but that seems to be spinning off into a semi-independent change)


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


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

Received on Wednesday, 2 April 2025 04:41:34 UTC