我正在开发一个网络应用程序,该应用程序使用由 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>
最佳答案
您可以简单地设置 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;
}
关于css - 如何将 Flexbox 与 Web 组件和影子 DOM 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66511157/