如何通过CSS修改ShadowRoot中FormLayout的#layout元素样式？

Shadow DOM默认具有样式隔离特性，普通CSS选择器无法直接穿透到<vaadin-form-layout>的ShadowRoot内部选中#layout元素，但Vaadin组件为自定义样式提供了两种常用方案：

1. 使用CSS Shadow Parts #

Vaadin的<vaadin-form-layout>通常会为内部的布局容器（即你提到的#layout元素）暴露名为layout的CSS Part，你可以通过::part()伪元素选择器修改它的样式：

#myid > vaadin-form-layout::part(layout) {
  /* 替换为你需要的样式属性与值 */
  gap: 1.5rem;
  padding: 12px;
  background-color: #f5f5f5;
}

2. 使用自定义CSS主题变量 #

如果<vaadin-form-layout>内部的#layout元素样式由CSS变量控制，你可以在外部组件或全局样式中定义这些变量，它们会自动穿透Shadow DOM生效：

#myid > vaadin-form-layout {
  /* 示例：修改布局间距的主题变量，具体变量名可参考Vaadin组件的主题定义 */
  --vaadin-form-layout-column-gap: 1rem;
  --vaadin-form-layout-row-gap: 0.5rem;
}

这两种CSS方案比JavaScript操作DOM样式更符合组件样式管理的最佳实践，无需手动操作ShadowRoot，代码更简洁易维护。

内容的提问来源于stack exchange，提问作者gidravlic