Re: [csswg-drafts] [css-cascade] Evaluate cascade order of ::slotted and global styles in the same conditions (#6466)

It can be both, right? A way to deprioritize "outer" styles, and a way to prioritize "inner" styles.

In https://github.com/w3c/csswg-drafts/issues/10094#issuecomment-2179369415, I've suggested a new `@context` at-rule for that.

<details>

<summary>Hypothetical example</summary>

```html
<head>
  <style>
    @context(first) {
      *, ::before, ::after {
        box-sizing: border-box; margin: 0; padding: 0;
      }
    }
  </style>
</head>

<body>
  <my-component>
    <div>Slotted</div>
    <template shadowrootmode="open">
      <slot></slot>
      <style>
         @context(last) {
           :host { padding: 4px; }
           :slotted(*) { margin: 4px; }
         }
      </style>
    </template>
  </my-component>
</body>
```

</details>

The exact syntax and names are debatable of course. The important thing I want to highlight is that this is a concern that lies _above_ layers, specificity, source order, etc. It doesn't make sense to solve it at the level of specificity-level. It should be done using context or a new concept that sits above context-scoped layers.

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


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

Received on Friday, 25 October 2024 18:30:28 UTC