如何避免Web Components中的槽元素在其余元素渲染之前出现?

问题描述 投票:0回答:3

我的问题是,在 Web 组件的其余部分渲染之前,开槽元素以原始形式出现。假设您有一个 Web 组件,您可以在其中设置几个不同的 HTML 元素(包括开槽元素)的样式。渲染的第一件事是原始(无样式)格式的开槽元素,该元素在站点加载后立即出现。

我能想到的唯一解决方案是为开槽元素提供

opacity
0
并更改 DOMContentLoaded 事件的不透明度。

有更好的方法吗?

谢谢!

javascript web-component
3个回答
4
投票

Web 组件有一个

:defined
伪选择器,您可以使用它为已定义和未定义的元素定义样式。在您的情况下,只要正确定义和渲染元素,您就可以更改不透明度。

my-element {
  opacity: 0;
}

my-element:defined {
  opacity: 1;
}

1
投票

Emiel给出的答案很完美。我在代码中使用了它的较短版本。

my-element:not(:defined) {
 opacity: 0;
}

另一种也有效的变体:

my-element:not(:defined) {
 display: none;
}

0
投票

阻止所有未定义的元素显示:

*:not(:defined) { display: none; }

令人惊讶的是,它不在用户代理样式表中。

© www.soinside.com 2019 - 2024. All rights reserved.