Skip to content

Commit

Permalink
Additional details on @scope boundaries.
Browse files Browse the repository at this point in the history
Describes the inclusivity/exclusivity of @scope boundaries, and makes it clear that an inline @scope can be used just with a scope limit.
  • Loading branch information
bayesian-intelligence authored Dec 22, 2024
1 parent 948f86c commit 9c0a38c
Showing 1 changed file with 4 additions and 0 deletions.
4 changes: 4 additions & 0 deletions files/en-us/web/css/@scope/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ The `@scope` at-rule contains one or more rulesets (termed **scoped style rules*
}
```

The scope's upper bound is inclusive and its lower bound is exclusive. To change these, you can combine either selector with a universal child selector. For example, `@scope (scope root) to (scope limit > *)` would make both upper and lower bounds inclusive, `@scope (scope root > *) to (scope limit)` would make both bounds exclusive, while `@scope (scope root > *) to (scope limit > *)` would give an exclusive upper bound and inclusive lower bound.

2. As inline styles included inside a {{htmlelement("style")}} element in your HTML, in which case the prelude is omitted, and the enclosed ruleset is automatically scoped to the `<style>` element's enclosing parent element.

```html
Expand All @@ -34,6 +36,8 @@ The `@scope` at-rule contains one or more rulesets (termed **scoped style rules*
</style>
</parent-element>
```

It is also possible to combine an inline `@scope` with a scope limit selector, as in `@scope to (scope limit) { ... }`.

## Description

Expand Down

0 comments on commit 9c0a38c

Please sign in to comment.