Search code examples
vaadinshadow-dom

Vaadin: Why does e.g. HorizontalLayout have a Shadow DOM

This question is about understanding why it is implemented that way.

When looking at the HTML of e.g. HorizontalLayout, VerticalLayout, one can see they have a Shadow DOM inside which there is only a <slot>-Element containing the content. Screenshot from Firefox Inspector

As far as I understand, the purpose of Shadow DOMs is to limit the scope of the styling to the individual component, and <slot> offers the possibility to include components which have the global styling. So the Shadow DOM inside <vaadin-horizontal-layout> looks like it does nothing, as the local styles do not apply to the <slot>-content.

Assuming this is the most elegant solution, then what was the problem? What is the purpose of this construction? Is it using properties of the Shadow DOM that I am not aware of?

Solution

  • The shadow dom of the Vertical/Horizontal Layout contains the style of the layout (padding, margin, spacing, direction, ...).

    This is the internal behavior of the component.

    You can add the children in the slot of the component, so you can style them with global styling.