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

It's not possible to scope css custom properties to a local shadow tree.
authors can set properties intended to apply only on current template of custom element but they always leak downwards to nested custom elements and shadow trees.
This result an integrated component within a component to undesireably apply unexpected values.
Take the following case where a layout component should default to fallback value when using `gap: var(--layout-gap, 4px)`
```html
<my-layout gutter="md">
  // it will set --layout-gap: 16px
  <my-layout>
    // this should default to a default size of 4px unless the --layout-gap is defined with value.
    // as it is affected by the parent 'layout' it will inherit its css custom property value and set with its value unexpectedly
```

The use of variable prefix (`--layout...`) may help preventing the above when different custom elements are weaved within each other, but the above use-case is of the same element, therefore is in a pickle.


could [@property](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) feature be of help with its inherit prop?

this is actually an enforced [subgrid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid) workaround, but an issue for custom elements

-- 
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