W3C home > Mailing lists > Public > public-css-archive@w3.org > December 2020

Re: [csswg-drafts] [css-variables?] Higher level custom properties that control multiple declarations (#5624)

From: Brandon Ferrua via GitHub <sysbot+gh@w3.org>
Date: Wed, 09 Dec 2020 19:29:10 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-741997150-1607542149-sysbot+gh@w3.org>
I think this is a great idea and would find it very useful in our applications as we author them today.

We might author a web component that provides an interface to change the `border radius` of `part=foo` through `var(--border-radius)`.

I'd assume through a conditional, we can expose an additional interface that would inherit a custom property from an ancestor.

```css
@if(conditional: true) {
  --prop: var(--new-prop);
}
```

Based on the conditional, a component we author might take the shape of the following:

```html
<your-element>
  #shadow-root
    <style>
      [part=foo] {
        border-radius: var(--border-radius, 0);
        @if(--theme: bubbles) {
          /* inherits --app-border-radius from ancestor such as :root */
          --border-radius: var(--app-border-radius, 15px);
        }
      }
    </style>
    <div part="foo">Text</div>
</your-element>
```

This would give our customers to control the behavior of `--theme: bubbles` outside of the component they don't own.

Since CSS custom properties inherit through shadow trees, my assumption is a customer can gain better control by changing CSS contextually in their component.

Their app might define `30px` for all `border-radius`.

```css
:root {
  --theme: bubbles;
  @if(--theme: bubbles) {
    --app-border-radius: 30px;
  }
}
```

But contextually, they want to target the prop from `::part(foo)` and override the applications `border-radius` of `30px` to be `4px` for the instance of `<my-element>`.

```html
<my-element>
  #shadow-root
    <style>
      ::part(foo) {
        @if(--theme: bubbles) {
          --border-radius: 4px;
        }
      }
    </style>
    <!-- customer does not own this component -->
    <your-element></your-element>
</my-element>
```

I highlight this example to capture how Salesforce would share styles between components but expose additional control for our customers.


-- 
GitHub Notification of comment by brandonferrua
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5624#issuecomment-741997150 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 9 December 2020 19:29:12 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:23 UTC