为什么 display:flex 不尊重阴影根边界？

Question

如果您在影子根子节点上切换 display:flex，它也会影响外部元素。 （所有大型浏览器的行为都是如此。）为什么？

有一个带有影子根的 Web 组件：

<web-comp style="display: inline-block;"></web-comp>

在 shadow root 里面有一个带有 display:flex 的 div：

div.style="display:flex; align-items:center; height:50px;"

完整的例子：

class demo extends HTMLElement {
  connectedCallback() {
    const shadow = this.attachShadow({mode: 'open'});
    
    const div = document.createElement('div');
    div.innerHTML= "I am in a shadow root!"
    div.style="display:flex;align-items:center;height:50px;background:lightblue"
    shadow.appendChild(div);
  }
}
customElements.define('web-comp', demo);

  <h3>flexbox styles do not respect shadow root border</h3>

   <web-comp style="display: inline-block;"></web-comp>
And I am not.

   <button onclick="document.querySelector('web-comp').shadowRoot.querySelector('div').style.alignItems='baseline'">
   Click to change 'align-items' of div in shadow root.
   </button>

Answer 1

是的，有效果，但对于固定高度的 inline-block 元素来说是正常行为，

<style>
  web-comp {
    display: inline-block;
    background: lightgreen;
    padding: 1em; /* becomes the "margin" above <span> */
  }
  span { background: pink }
</style>
<h3>Click the light green boxes</h3>
<div style="background:green">
  <web-comp></web-comp>
  <span>span</span>
  <span>span</span>
  <span>span</span>
  <web-comp></web-comp>
  <span>span</span>
  <span>span</span>
</div>

<script>
  customElements.define('web-comp', class extends HTMLElement {
    connectedCallback() {
      this.attachShadow({mode:'open'})
          .append(this.div = document.createElement('div'));
      this.div.style = "display:flex;height:60px";
      this.DIValign("center");
      this.onclick = () => {
        if (this.div.style.alignItems == "center") this.DIValign("baseline");
        else this.DIValign("center");
      };
    }
    DIValign(val) {
      this.div.innerHTML = ` align-items: ${this.div.style.alignItems = val}`;
    }
  })
</script>

Answer 2

老实说，我不同意这个例子，因为它的布局对我来说似乎不合适。文本“我不是”。是 body 元素的 innerHTML 文本，如果我没有被误导的话。如果将此文本正确地放入其自身的元素中——就像文本“我在阴影根中！”所做的那样。 --，比方说<p style="display:flex;align-items:center;height:50px;background:lightgreen">And I am not.</p>，你不会看到描述的效果。

我明白问题的重点，但我不明白相关性。它只是提醒我们按照规范中的预期正确布局我们的文档，同时也是为了避免可能依赖于实现的副作用。我想，如果不按预期使用锤子，东西可能会坏掉。