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

3 Answers 3

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.