Web 组件可以有 Flexbox 子组件吗？

Question

CSS Flexbox 布局充当元素之间的父子关系。父元素设置为 display: flex 并且其子元素成为 flex 子元素。

我正在寻找一个明确的答案，了解如果将 Web 组件（或自定义元素）设置为 Flex 父级会发生什么情况。自定义元素的 Flex 子元素是什么（如果有）？并且，答案是否会根据是否启用 Shadow DOM 而改变。

在父文档中：

<my-custom-element style="display: flex"></my-custom-element>

在自定义元素模板中：

<div style="flex: auto">A</div>
<div style="flex: auto">B</div>
<div style="flex: auto">C</div>

Answer 1

好吧，让我们使用这两种变体来检查一下：

customElements.define('custom-element-with-shadowroot', class extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode:'open'}).innerHTML = `
      <style>
        :host { display: flex; flex-direction: row; gap: 20px; height: 50px; width: 200px; }
        div { background-color: orange; }
      </style>
      <div>1</div>
      <div>2</div>
      <div>3</div>      
    `;
  }
});

customElements.define('custom-element-without-shadowroot', class extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = `
      <style>
        custom-element-without-shadowroot { display: flex; flex-direction: row; gap: 20px; height: 50px; width: 200px; }
        div { background-color: orange; }
      </style>
      <div>1</div>
      <div>2</div>
      <div>3</div>      
    `;
  }
});

<custom-element-with-shadowroot></custom-element-with-shadowroot>
<hr>
<custom-element-without-shadowroot></custom-element-without-shadowroot>

正如您所看到的，无论有没有 Shadow DOM，自定义元素本身都可以充当 Flex 容器。请注意 :host 仅适用于影子 DOM。