Re: [css-houdini-drafts] [css-properties-values-api] Should property registration be scoped? (#939)

From my point of view being able to define a `@property` inside a shadow DOM, but having it exposed outside of it, would be a very useful scenario.

Right now, CSS custom properties are pretty much the only way to provide a styling API for web components. But there is no easy way to define an API, since you'd mostly have to look for references in the CSS.

Using `@property` in the web component's shadow DOM would make it quite straightforward, and allow tools to extract such information so it can be used via language services and similar IDE features (I'm already parsing them to generate documentation).

On a related note, right now I'm getting this behavior (Chromium 96):

```html
<!-- template for a custom element with the usual clone node and shadow root -->
<style>
  @property --unique-name {
    syntax: '<color>';
    initial-value: red;
  }
  div { color: var(--unique-name); }
</style>
<div>Test</div>
```

The div does not get its color set (with or without inherit on the property), but moving the `@property` outside the shadow DOM makes it get applied.

Shouldn't it at least apply within the shadow DOM's scope, or are `@property`'s currently forbidden in the shadow DOM? I know many of the examples in this discussion are hypothetical, but I'm not quite sure on what the current state allows.

I suppose it would be make sense, considering the JS API for registering is on the global `CSS` object.


-- 
GitHub Notification of comment by rraziel
Please view or discuss this issue at https://github.com/w3c/css-houdini-drafts/issues/939#issuecomment-1008461086 using your GitHub account


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

Received on Monday, 10 January 2022 00:45:02 UTC