Make it simpler to target the row selection checkboxes for styling in a multi-select Grid

[mlindfors]

Describe your motivation

Currently the Grid styling documentation says to use the following selector for styling the row-selection checkboxes in a multi-select Grid: vaadin-grid > vaadin-checkbox This will, however, target all the checkboxes in the Grid, if you happen to render checkboxes inside other columns. At the moment there is no simple and direct way to target only the row-selection checkboxes for styling.

Describe the solution you'd like

The row-selection checkboxes should have a CSS class name so that it's easy to explicitly target only them. Something to the tune of "vaadin-grid-selection-checkbox", or something else specific enough to not cause conflicts with any possible user-defined class names.

Describe alternatives you've considered

Current approaches for styling the row-select checkboxes depend a bit on what you are trying to do with them. If you're lucky, you can use custom properties, target the first-column-cell part in the Grid, and then just make sure the selection column cannot be moved around.

Or you might try and go with an injected style and deal with the slotted checkboxes through that route, but that also limits what you can do.

You can get a hold of the checkboxes by targeting them with the aria-label they have, but this really won't work reliably in a multilingual application.

None of the approaches here offer simple means of targeting the row-selection checkboxes, or are reliable enough to be considered fully viable. Depending on your needs they might work as a stopgap measure until a better solution is introduced.

Additional context

No response