Lit中嵌套Web组件为何会额外增加垂直间距？

当给元素设置padding-left: 32px时，嵌套在<cai-setting-row-account>内的<cai-setting-row>会出现额外垂直间距，且顶部存在与内边距距离一致的异常边框；非嵌套的同类元素则显示正常。若先将CSS中的padding-left设为0，再通过Chrome调试器手动添加32px内边距，该异常不会出现。

相关代码 #

页面结构代码 #

<cai-setting-row class="itemGroupMiddle doubleIndent" data-type="A">Not Nested A</cai-setting-row>
<cai-setting-row class="itemGroupMiddle doubleIndent" data-type="A">Not Nested B</cai-setting-row>

<cai-setting-row-account></cai-setting-row-account>

嵌套组件渲染代码 #

render() {
  return html`<cai-setting-row
        class="itemGroupMiddle doubleIndent"
        data-type="A"
        >Nested A</cai-setting-row
      ><cai-setting-row class="itemGroupMiddle doubleIndent" data-type="A"
        >Nested B</cai-setting-row
      >`;
}

渲染效果 #

注：图中“Not Nested”元素显示正常，“Nested”元素存在额外垂直间距及顶部异常边框

问题原因 #

该异常主要由Web组件模板字符串中的空白文本节点引发的布局计算异常导致：

• 嵌套组件的渲染模板中，标签换行产生的空白字符会被解析为文本节点，这些节点在特定布局下会触发外边距折叠或额外占位，进而表现为垂直间距；
• 手动在调试器修改样式时，不会引入额外空白节点，因此布局正常。

解决方案 #

1. 清除模板中的空白字符 #

将渲染代码改为紧凑写法，避免换行产生空白节点：

render() {
  return html`<cai-setting-row class="itemGroupMiddle doubleIndent" data-type="A">Nested A</cai-setting-row><cai-setting-row class="itemGroupMiddle doubleIndent" data-type="A">Nested B</cai-setting-row>`;
}

2. 消除空白节点的布局影响 #

在<cai-setting-row-account>的样式中添加以下规则，通过字体大小消除空白字符的占位：

:host {
  font-size: 0;
}
:host > * {
  font-size: initial;
}

3. 强制盒模型计算方式 #

给<cai-setting-row>设置box-sizing: border-box，确保内边距不会改变元素的总高度：

cai-setting-row {
  box-sizing: border-box;
}

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