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

Question

我正在开发一个使用 StencilJS 构建的网络组件的网络应用程序。所有组件都打开了 Shadow DOM。许多组件使用 'slots' 来接受子内容。

我在使用 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;
}

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

How to use Flexbox with web components and shadow DOM

css

web-component

flexbox

shadow-dom

stenciljs