search

vaadin / web-components

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
https://vaadin.com/docs/latest/components
444 stars 83 forks source link

[app-layout] Assign part to content div to allow easier "global" styling #7363

Open stefanuebe opened 4 months ago

stefanuebe commented 4 months ago

Describe your motivation

I want content shown in the app layout to be of full size by default. To not having the dev to set this for each view, I simply want to do that via css. Unfortunately there is no direct way to target the content div inside the shadow dom nor is the slotted component marked in any way (like slot="content").

Describe the solution you'd like

The content div should have a part attribute "content" similar to all the other parts of the app layout (like "drawer", "navbar", etc.)

Describe alternatives you've considered

Using themes plus the "components" folder and shadow dom styling. Override the showRouterLayoutContent() / setContent() methods in the app layout (in Flow).

Additional context

This issue came up in Flow, not sure if it is also a problem using the webcomponent in Hilla or similar.

rolfsmeds commented 4 months ago

There is in fact a way to target the child of the content slot: vaadin-app-layout > :not([slot])

(We should mention this in the selector list on the Styling tab.)