如何将 Flexbox 与 Web 组件和 Shadow 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;
}