[vaadin-grid-tree-toggle] Add a part name to the slot element.

[stefanuebe]

Describe your motivation

The tree toggle overrides the default stylings for <slot>, changing its display to block instead of contents. This leads to the issue, that elements placed into that slot cannot use relative dimensions based on the light dom, but have to have knowledge of the shadow dom.

Describe the solution you'd like

To overcome this issue with our current way of styling shadow dom parts, the easiest way seems to be adding a respective part attribute to the slot element, e.g.

<slot part="content"></slot>

allowing devs to target it in the light dom stylings

vaadin-grid-tree-toggle::part(content) {
    width: 100%;
}

Might be also a good idea to have the width of the slot set to 100% by default, but not sure if this may break other things.

Describe alternatives you've considered

Adding my own styles

styles.css

vaadin-grid-tree-toggle, 
vaadin-grid-tree-toggle > * {
    width: 100%;
}

shadow dom styling for the toggle element, e.g. frontend/themes/your-theme/components/vaadin-grid-tree-toggle.css

slot {
    width: 100%;
}

Additional context

Based on https://vaadin.com/forum/t/how-to-get-a-rich-component-for-the-hierarchy-column-have-width-of-the-column/168199

[simeshev]

Using both styles.css:

vaadin-grid-tree-toggle {
    width: 100%;
}

and

frontend/themes/your-theme/components/vaadin-grid-tree-toggle.css

slot {
    width: 100%;
}

worked.

[simeshev]

Still, it would be great to have a fix because it took 3 days of trying to figure it out and then asking in the forum to get a workaround. On top of it, styling the shadow DOM is not the right way to do it if I understand Vaadin's policy correctly.

[jouni]

I’m not fond of adding a part to the slot element. It’s already questionable that we change the display value of it. Though, I don't see any real issue with it, apparently it’s discouraged by either by some browser engine devs or spec authors.

The simplest fix is to add width: 100% for the slot.

[stefanuebe]

The question is how it behaves, when other elements outside of the toggle are displayed in the grid cell (as a common workaround in Flow is the overriding of the hierarchy column to display the value outside of it)?

Removing the display: block and moving the other settings other places would also be suitable solution in my eyes.

[jouni]

If content is outside the tree toggle, then it doesn't matter what the styles are for the toggle, right? Or I probably misunderstood what you mean. How I read this issue, is specifically about the sizing of elements inside the <vaadin-tree-toggle> element.

The purpose of the display: block and other styles is to enable text truncation with ellipsis (…), which doesn't work directly with a flex container (the host element is a flex container). I don't see that as an option, to remove that feature.