Re: [WICG/webcomponents] Scoping CSS custom properties inheritance (#945)

In that case, it seems more like you want it to have a default of zero, so more like:
```
:host {
  --layout-gap: 0;
}
```
So you could set the gap on each element directly but there would always be no gap for element that were directly handled. Check it out here: https://webcomponents.dev/edit/zQIwcnEAtvBTC2gVM7d6/src/index.stories.js?branch=set-zero%40wfVpXdsTYhf9mY2slxW4t2Y2SjC3

You might also be interested in [registering your Custom Property](https://developer.mozilla.org/en-US/docs/Web/CSS/@property), a la the following which prevent inherit all together:
```
@property --layout-gap {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}
```
You can also [do this with JS](https://developer.mozilla.org/en-US/docs/Web/API/CSS/RegisterProperty) if you prefer:
```
window.CSS.registerProperty({
  name: '--layout-gap',
  syntax: '<length>',
  inherits: false,
  initialValue: '0px',
});
```
This block all inheritance, so you would have to use `--layout-gap` directly on the `:host` which could be a pain depending on your use case, e.g. https://webcomponents.dev/edit/zQIwcnEAtvBTC2gVM7d6/src/index.js?branch=register-property@wfVpXdsTYhf9mY2slxW4t2Y2SjC3

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/945#issuecomment-941635821