css - 如何将 Flexbox 与 Web 组件和影子 DOM 一起使用

Question

我正在开发一个网络应用程序，该应用程序使用由 StencilJS 构建的网络组件。所有组件都启用了 Shadow DOM。许多组件使用“插槽”来接受子内容。

我在使用 Flexbox 布置此应用程序时遇到了一些问题。我经常遇到的一个场景是，我希望一个组件充当 Flexbox 容器，而它的子组件是 Flex 元素。

我怀疑 Shadow DOM 阻塞了我的 Flexbox。有没有办法让 Flexbox 与 Web 组件和 Shadow DOM 一起工作？

例子:

<web-component-a>
  <web-component-b></web-component-b>
  <web-component-b></web-component-b>
  <web-component-b></web-component-b>
</web-component-a>

Answer 1

您可以简单地设置 slot 元素的样式，如下所示:

class WebComponentA extends HTMLElement {
  constructor() {
    super();

    const shadowRoot = this.attachShadow({mode: 'open'});


    shadowRoot.innerHTML = `
      <style>
        slot {
          display: flex;
          flex-direction: row;
        }
      </style>
      <div>
        <slot></slot>
      </div>
    `;
  }

}

window.customElements.define('web-component-a', WebComponentA);

如果您有多个槽元素(命名槽)，您可以使用基于 CSS 属性的选择器，例如:

slot[name=title] {}

如果您想从 Web 组件中覆盖开槽内容的样式，您可以使用 ::slotted()选择器:

slot::slotted(*) {
  font-size: 2rem;
}