是的，存在影响，但inline-block元素具有固定高度的正常行为，
请看绿色的边距。是display-block和固定的DIV高度让您认为flex会影响<span>元素。这与那些作为Web组件的元素无关。您可以用DIV替换Web组件。这是标准的CSS块行为

<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>

老实说，我不能同意这个例子，因为它的布局对我来说似乎不合适。文本“I am not.”是body元素的innerHTML文本，如果我没有被误导的话。如果一个人把这个文本正确地放在一个元素中--就像文本“I am in a shadow root！”--比如说放在<p style="display:flex;align-items:center;height:50px;background:lightgreen">And I am not.</p>中，你就不会看到描述的效果。
我明白这个问题的意思，但我看不出它的相关性。它只是提醒我们要按照规范中的意图正确地布局文档，同时也要避免可能依赖于实现的副作用。如果一个人没有按照预期使用锤子，我想东西可能会被打碎。