[css-properties-values-api] [css-cascade] Interaction of @scope and @property

[bramus]

With @scope defined in css-cascade-6, should authors be able to register custom properties with @property inside the scope, without those properties loitering the global space?

@scope (.card) {
  /* Should --color be local to the scope or not? */
  @property --color {
    …
  }
}

If it should be scoped, should that happen automatically or should it be opt-in by means of an extra descriptor during registration?

[bramus]

Spec currently reads this (source):

Global name-defining at-rules such as @keyframes or @font-face or @layer that are defined inside @scope are valid, but are not scoped or otherwise affected by the enclosing @scope rule.

Probably makes sense to keep this behavior, and make it an opt-int should we want to.

Use-case would be an author shipping a component with scoped styles, knowing that the custom properties they use don’t clash with the global namespace. Right now they need to work around this by prefixing their custom props, hoping nobody else uses that prefix.

[andruud]

With @scope defined in css-cascade-6, should authors be able to register custom properties with @Property inside the scope, without those properties loitering the global space?

No, we couldn't even do it for ShadowDOM (which is more strict and encapsulating): https://drafts.css-houdini.org/css-properties-values-api-1/#shadow-dom

[bramus]

Thanks for the clarification, @andruud. Closing.