admin管理员组

文章数量:1427340

My problem is that slotted elements appear in raw form before the rest of the Web Component is rendered. Imagine you have a Web Component in which you style a couple of different HTML elements including a slotted element. The first thing which is rendered is the slotted element in raw (unstyled) format which appears immediately after the site has been loaded.

The only solution I could e up with is giving the slotted element an opacity of 0 and changing the opacity on the DOMContentLoaded event.

Is there a better way?

Thank you!

My problem is that slotted elements appear in raw form before the rest of the Web Component is rendered. Imagine you have a Web Component in which you style a couple of different HTML elements including a slotted element. The first thing which is rendered is the slotted element in raw (unstyled) format which appears immediately after the site has been loaded.

The only solution I could e up with is giving the slotted element an opacity of 0 and changing the opacity on the DOMContentLoaded event.

Is there a better way?

Thank you!

  • javascript
  • web-ponent
Share Improve this question asked Oct 5, 2020 at 16:57 TakeTake 4044 silver badges13 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 6

Web ponents have a :defined pseudo selector with which you can define styles for a defined and undefined element. In your case you could change the opacity whenever the element is defined and rendered properly.

my-element {
  opacity: 0;
}

my-element:defined {
  opacity: 1;
}

The answer given by Emiel is perfect. I used a shorter version of it in my code.

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

Another variant that also worked:

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

Prevent all non-defined elements from displaying:

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

Surprised that isn't in the user agent stylesheet.

本文标签：

版权声明：本文标题：javascript - How to avoid that slot elements in Web Components appear before the rest is rendered? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745495022a2660769.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。