如何解决如何在 Web 组件和 shadow DOM 中使用 Flexbox
我正在开发一个使用 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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。