How to style vaadin grid (4.0.0)?
How can I use :
Part name | Description
* ----------------|----------------
* row | Row in the internal table
* cell | Cell in the internal table
* header-cell | Header cell in the internal table
* body-cell | Body cell in the internal table
* footer-cell | Footer cell in the internal table
* details-cell | Row details cell in the internal table
* resize-handle | Handle for resizing the columns
* reorder-ghost | Ghost element of the header cell being dragged
*
I assume you have copied the list from documentation here
https://vaadin.com/elements/vaadin-grid/html-api/elements/Vaadin.GridElement
The list means, that these names are available for styling, i.e. visible outside shadow dom. Idea of web components is that part of the implementation is hidden in shadow dom, and can be manipulated only by component itself. You can compare it to private members and methods of the java class.
The names available for styling, can be used in your theme css file. I.e. you can use them freely there. Note, if you for example use stylename ‘header-cell’ in your css, it will impact all the grids. So if you want to style a specific grid, you need to add specific classname to it and use something like ‘.my-grid > .header-cell { … }’ in your theme css file.
Sorry to say, but Tatu is not providing the correct answer.
The stylable parts are all hidden inside the shadow DOM, so they are not stylable with regular, global CSS. You need to target them in a specific way (they are not regular CSS class names either).
To learn all about it, see the ThemableMixin documentation:
https://github.com/vaadin/vaadin-themable-mixin/wiki