Vaadin：为什么会这样？ HorizontalLayout 有一个 Shadow DOM答案

【问题标题】：Vaadin: Why does e.g. HorizontalLayout have a Shadow DOMVaadin：为什么会这样？ HorizontalLayout 有一个 Shadow DOM
【发布时间】：2021-11-25 18:55:22
【问题描述】：

这个问题是关于理解为什么以这种方式实现的。

当查看例如 HTML HorizontalLayout，VerticalLayout，可以看到他们有一个Shadow DOM，里面只有一个<slot>-Element 包含内容。

据我所知，Shadow DOM 的目的是将样式的范围限制在单个组件中，<slot> 提供了包含具有全局样式的组件的可能性。所以 <vaadin-horizontal-layout> 中的 Shadow DOM 看起来什么都不做，因为本地样式不适用于 <slot>-content。

假设这是最优雅的解决方案，那么问题出在哪里？这种建设的目的是什么？是否使用了我不知道的 Shadow DOM 属性？

【问题讨论】：

我没有 Vaadin 经验。但是你是对的 slotted 内容（来自 lightDOM）是由它的容器/全局 CSS 设计的。请参阅：stackoverflow.com/questions/61626493/…。从您的屏幕截图看来，没有您也可以这样做；唉，许多开发人员认为您需要在 Web 组件中使用 shadowDOM。

标签： vaadin shadow-dom

【解决方案1】：

Vertical/Horizontal Layout 的 shadow dom 包含布局的样式（内边距、边距、间距、方向...）。

这是组件的内部行为。

您可以将子组件添加到组件的槽中，这样您就可以使用全局样式设置它们的样式。

【讨论】：

所以 Vaadin 使用相同的类名、主题等给所有组件，并区分这些组件对这些名称的反应，这些组件在 Shadow DOM 中具有单独的样式？
我不确定我是否理解。对于vertical-layout/horizontal-layout，html减少到最小，你可以为两者使用相同的主题，但在内部它的工作方式不同。例如间距将添加垂直空间或水平空间。
谢谢，我了解 Shadow DOM 的作用。但这听起来也可以在 HTML 标签上使用 CSS 选择器来解决，这将是一个更容易的解决方案。
是的，布局可以在没有影子 DOM 的情况下实现，通过将必要的样式注入到与布局本身相同的样式范围中（布局可以放置在另一个影子根中，而不仅仅是在全局范围中）。使用 shadow DOM 打包组件更方便，因为浏览器提供了所有的“管道”。否则，如果我们想保持 DOM 干净，我们需要避免多次注入相同的样式，在最后一个布局与任何给定样式范围分离后清理任何注入的样式。此外，覆盖样式会有点困难。