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!
Share Improve this question asked Oct 5, 2020 at 16:57 TakeTake 4044 silver badges13 bronze badges3 Answers
Reset to default 6Web 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.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745495022a4630153.html
评论列表（0条）