Styling vaadin-grid

Flow
1

Hi

I am trying to change the --_lumo-grid-selected-row-color for the vaadin-grid component.

Is there a way to do this with javascript?

I am now registering the new styles like this

const vaadinGridStyles = css`
  --_lumo-grid-selected-row-color: #AAAAAA;
  [part~='row']
[first]
 {
    border-top: 1px solid #FF0000;
  }
`;
registerStyles('vaadin-grid', vaadinGridStyles);
2

Hi, you need to make your code a valid CSS with :host selector:

const vaadinGridStyles = css`
  :host {
    --_lumo-grid-selected-row-color: #AAAAAA;
  }
`;
registerStyles('vaadin-grid', vaadinGridStyles);
3

You should not use/rely on internal CSS custom properties, which are prefixed with --_ (instead of public API which is --). I know this isn’t really documented anywhere except in the source code, so it’s our fault really.

We should consider making this part of the public API.

4

thank you, the suggestion :host works.

If there is a better way to style the components in javascript, I would like to know, because there are more things I would like to style