Access component attributes within css``

[Patrickroelofs]

I was wondering if there was a way to access attributes within the CSS and dynamically set them based on properties, like for example changing the colour of an element when the isLoading attribute is set to true. This would be similar to how you can use attributes within the template html`` function.

(example of what im trying to do)

export const dataGridStyles = () => css`

    :host {
        ${x => x.isLoading && css`
              color: red;
        `}
     }

`

I know the CSS function also has the following attributes, but i have been unable to access the component attributes through that.

context: ElementDefinitionContext,
definition: FoundationElementDefinition,

Is this possible or should i look for alternative options?

PS: I do know that we can do :host([is-loading='true']) { }, although I would prefer to do it with the attributes in the component itself.

[DavidVollmers]

You can use the PropertyStyleSheetBehavior class for this. (https://www.fast.design/docs/api/fast-foundation.propertystylesheetbehavior/)

export const myStyles = css`
  /* default styles */
`.withBehaviors(
  new PropertyStyleSheetBehavior('isLoading', true, css`
    /* loading styles */
  `)
);

[Patrickroelofs]

Thanks, exactly what I was looking for!