1

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?

Mathias
  • 282
  • 1
  • 16
  • I don't have Vaadin experience. But you are right **slotted** content (from lightDOM) is styled by its container/global CSS. See: https://stackoverflow.com/questions/61626493/slotted-css-selector-for-nested-children-in-shadowdom-slot/61631668#61631668. By your screenshot it looks like this could have done withou; alas many developers think you require shadowDOM in Web Components. – Danny '365CSI' Engelman Oct 05 '21 at 14:26

1 Answers1

4

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.

Jean-Christophe Gueriaud
  • 1,328
  • 3
  • 8
  • So Vaadin is using giving the same class names, themes etc. to all components, and to differentiate how these components react to these names the components have an individual styling inside the Shadow DOM? – Mathias Oct 05 '21 at 13:48
  • I'm not really sure if I understand. For the vertical-layout/horizontal-layout, the html is reduced to the minimum, you can have the same theme for both but internally it works differently. For example spacing will add a vertical space or horizontal space. – Jean-Christophe Gueriaud Oct 05 '21 at 14:17
  • Thanks, I understand what the Shadow DOM does. But this sounds like it could be solved using CSS selectors on the HTML tag as well, which would be a much easier solution. – Mathias Oct 05 '21 at 14:21
  • 5
    Yes, the layouts could be implemented without shadow DOM, by injecting the necessary styles into the same style scope as the layout itself (a layout could be placed inside another shadow root, not just in the global scope). It’s just more convenient to package the component using shadow DOM, as the browser offers all the “plumbing”. Otherwise we would need to avoid injecting the same styles multiple times clean up any injected styles after the last layout is detached from any given style scope, if we wanted to keep the DOM clean. Also, it would be a bit more difficult to override the styling. – Jouni Oct 05 '21 at 16:53