为何display:flex不遵循Shadow Root边界，会影响外部元素？

这个现象的核心原因是行内块类型的自定义元素，其垂直对齐基线由Shadow Root内部内容决定，而flex容器的基线计算规则会直接影响整个自定义元素的基线位置，进而带动外部行内元素的垂直对齐变化。

具体拆解： #

• 你的自定义元素<web-comp>设置了display: inline-block，属于行内块元素，在文档流中会和相邻的行内文本（比如示例里的"And I am not."）默认以**基线（baseline）**对齐。
• Shadow Root内部的div是flex容器，CSS规范里，flex容器的基线位置会根据align-items的值变化：
  • 当align-items: center时，flex容器的基线计算会基于容器内部内容的垂直中心位置，这会让整个<web-comp>的基线位置偏下，外部文本就会跟着向下对齐。
  • 当切换成align-items: baseline时，flex容器的基线会和第一个flex子项（这里就是内部的文本节点）的基线对齐，此时<web-comp>的基线位置上移，外部文本也会跟着上移。

解决办法 #

如果不想内部样式影响外部元素，只需给自定义元素固定垂直对齐方式即可，比如：

web-comp {
  vertical-align: top; /* 或者 middle、bottom，按需选择 */
}

完整示例代码 #

JavaScript部分

class demo extends HTMLElement {
  connectedCallback() {
    const shadow = this.attachShadow({mode: 'open'});
    
    const div = document.createElement('div');
    div.innerHTML= "我在Shadow Root里！"
    div.style="display:flex;align-items:center;height:50px;background:lightblue"
    shadow.appendChild(div);
  }
}
customElements.define('web-comp', demo);

HTML部分

<h3>flexbox样式不遵守Shadow Root边界的问题</h3>

<web-comp style="display: inline-block;"></web-comp>
我不在Shadow Root里。

<button onclick="document.querySelector('web-comp').shadowRoot.querySelector('div').style.alignItems='baseline'">
点击修改Shadow Root内div的align-items属性
</button>

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