Added custom styling for table element in vaadin grid

[krishnathota]

Added "--vaadin-grid-table" variable to table element in "vaadin-grid-table" component

---

This change is 

[CLAassistant]

All committers have signed the CLA.

[jouni]

Hi! Thanks for the PR.

Can you describe in more detail why you need this mixin? We are planning to deprecate all CSS mixins in the next version (2.1) in favor of using style modules for theming, so I don’t think we want to add more of them. But it would be great to know what you need to customize so that we don’t forget that use case with the new theming/styling solution.

[krishnathota]

I think, mixins are pretty important if you want the grid to be customizable and that customization depends on the requirement. In my case we have a global css which sets the box sizing and margin to the "table" element which distorts the vaadin-grid. In order to fix that I needed that mixin.

Can I know why do you plan on ditching the mixins for style modules?

[jouni]

I think, mixins are pretty important if you want the grid to be customizable and that customization depends on the requirement.

We agree 100% that customizability is important, and depends a lot on the specific requirements. This is also one of the reasons to move away from mixins.

Can I know why do you plan on ditching the mixins for style modules?

Mainly due to the fact that they do not satisfy our needs for customizability and theming support. And this is not only our opinion, the majority of people working closely with the CSS spec agree, and the current CSS mixins spec proposal has been mostly withdrawn from the table, and will be replaced with something else in the future. If you want to know more, see this issue WICG/webcomponents#300

To learn more about the solution we are going to add to replace mixins, you can read this technical design document: https://docs.google.com/document/d/1wW19BKbXxAcULIVFXzN7l6qBZEf4h2XTCTjYJZNiiuk/edit#heading=h.zef178cxi95n

In my case we have a global css which sets the box sizing and margin to the "table" element which distorts the vaadin-grid. In order to fix that I needed that mixin.

I think this we should fix this in the internal styles of vaadin-grid, as we rely on a certain box-sizing value in the computation, we should guarantee it’s actually so. Also, this issue will go away once all browsers have native shadow DOM support.

I opened a new issue to fix the box-sizing: #864

[jouni]

In my case we have a global css which sets the box sizing and margin

I somehow skipped over “margin” there. I think it would be easiest for you to workaround this in your own app CSS, with something like

vaadin-grid table {
  margin: 0;
  box-sizing: content-box;
}