我的问题是,在 Web 组件的其余部分渲染之前,开槽元素以原始形式出现。假设您有一个 Web 组件,您可以在其中设置几个不同的 HTML 元素(包括开槽元素)的样式。渲染的第一件事是原始(无样式)格式的开槽元素,该元素在站点加载后立即出现。
我能想到的唯一解决方案是为开槽元素提供
opacity
的 0
并更改 DOMContentLoaded 事件的不透明度。
有更好的方法吗?
谢谢!
:defined
伪选择器,您可以使用它为已定义和未定义的元素定义样式。在您的情况下,只要正确定义和渲染元素,您就可以更改不透明度。
my-element {
opacity: 0;
}
my-element:defined {
opacity: 1;
}
Emiel给出的答案很完美。我在代码中使用了它的较短版本。
my-element:not(:defined) {
opacity: 0;
}
另一种也有效的变体:
my-element:not(:defined) {
display: none;
}
阻止所有未定义的元素显示:
*:not(:defined) { display: none; }
令人惊讶的是,它不在用户代理样式表中。