如何让Shadow DOM元素占满带min-height和边框的自定义元素高度

你可以通过给自定义元素设置 display: grid，同时在 Shadow DOM 内的 div 上设置 height: 100% 来解决这个问题，具体实现如下：

自定义元素样式 #

custom-textarea {
  min-height: 40vh;
  box-sizing: border-box;
  border: 2px solid #333;
  display: grid; /* 关键属性 */
}

Shadow DOM 内 div 的样式 #

.shadow-div {
  height: 100%; /* 占满自定义元素的可用高度 */
  box-sizing: border-box; /* 避免内容因内边距/边框溢出 */
  padding: 8px; /* 根据需求调整内边距 */
}

原理说明 #

• display: grid 会让自定义元素成为网格容器，其内部子元素（Shadow DOM 中的 div）会自动填充容器的可用高度，即使容器仅设置了 min-height 而非固定 height。
• 当 div 内容增多时，网格容器会自动被撑开，既保持自适应高度的特性，又维持 40vh 的默认高度。

另一种可选方案（Flexbox） #

如果你更倾向于使用 Flexbox，需确保在 Shadow DOM 内的 div 上设置 flex: 1，同时自定义元素设置 display: flex：

/* 自定义元素样式 */
custom-textarea {
  min-height: 40vh;
  box-sizing: border-box;
  border: 2px solid #333;
  display: flex;
}

/* Shadow DOM 内 div 样式 */
.shadow-div {
  flex: 1; /* 占据容器所有可用空间 */
  box-sizing: border-box;
  padding: 8px;
}

你之前尝试 Flexbox 无效，大概率是因为没在 Shadow DOM 内的 div 上设置 flex: 1——Flexbox 的容器样式无法穿透 Shadow DOM 的隔离边界，必须在 Shadow DOM 内部的元素上配置对应的 flex 属性。

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