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

Question

我正在开发一个使用 StencilJS 构建的 Web 组件的 Web 应用程序。所有组件都打开了 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;
}