Skip to content

[css-cascade-6] Scoped selectors shouldn't match the scope root unless explicitly requested with :scope? #8377

Closed
@mirisuzanne

Description

@mirisuzanne

This was suggested by @bramus in an offline conversation.

In the current cascade-6 specification, the @scope rule defines a 'scope' as a tree fragment that includes the scope root (:scope) element, but does not include any lower-boundary elements, or their decedents. Since the scope-root is 'in scope', it can be matched by scoped selectors:

@scope (div.scope) {
  /* This selector will match the :scope element */
  div { ... }

  /* :scope can be explicitly excluded */
  div:not(:scope) { ... }
}

While it's possible to exclude the scope-root from selectors by appending :not(:scope) - we could consider doing it the other way around. For example, a 'shadow host' is not matched by selectors in the shadow DOM unless :host is explicitly specified. The scope-root would still need to be 'available' to scoped selectors, but it would only match when specifically mentioned:

@scope (div.scope) {
  /* This selector WOULD NOT match the :scope element */
  div { ... }

  /* :scope can be explicitly included */
  div, :scope { ... }
}

On the one hand, it may be strange to have an element that is available 'in scope' but not matched by default. On the other hand, authors are likely to expect that matched elements will be 'nested' inside the scope-root selector. In either case, we would have a reasonable workaround for the counter-examples.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions