Re: [csswg-drafts] [css-cascade-6] Strong vs weak scoping proximity (#6790)

I want to drop one of the common cases that I encountered for scoping — mixing user-generated content with custom components for editorial copy.

We could want to target any semantic elements coming from markdown or whatever like `h1, p, li` etc, but then we need to be able to stop applying those selectors when they're inside our components.

My first naive idea to do this (following how we approximate this in our design system) could be something like 

```CSS
@scope (.content) to (:scope [class]:not(.scope-element)) {
  h1 {}
  p {}
  li {}
}
```

(I'm using the `:scope` for the limit, as I'm not exactly sure if without it the scope would start and end on itself, due to the `.content` matching the `[class]`?)

This would apply the styles for any class-less elements, stopping the scope at any component that has a class, unless that component has a special `.scope-element`, in which case it would participate in the scope.

Scope would guarantee that we won't have any collisions between our regular elements and any semantic elements used for custom components.

For the strong vs weak — I don't have an opinion based on just theory, I would need to play with both variants, applying them to some practical code in order to understand the real consequences of this. On the first glance, I would say that having the `weak` as default would be safer, but it would be interesting to play around with the `strong` one as well.

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


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

Received on Thursday, 16 March 2023 16:13:58 UTC