Load CSS lazily / unload it after no longer used

[ebryn]

We should have an option that allows the addon to dynamically require/load the CSS the first time a component is instantiated and potentially also unload it after every instance of it is removed. This will help prevent leakage and might even have some performance benefits?

[trentmwillis]

I'm all for lazy-loading things. Is the approach you're thinking about to inject the CSS into a style tag when the component is inserted and remove after it is destroyed?

[dfreeman]

Really interesting idea. Do you know if anyone out there has done any research into the perf implications of an approach like this? I could imagine introducing new styling rules during render might have a negative impact, given that the browser will have to verify that they don't affect the rest of the existing DOM.

[oligriffiths]

Are there lifecycle hooks for adding/removing of components from the dom that can be used to dynamically load/unload stylesheets?

[Abuthahir-Sulaiman]

@ebryn @dfreeman I have a similar ask where we are trying to lazy load the css of few components thats not need in the landing page, To give an insight we are trying to achieve something similar to this article: https://web.dev/articles/defer-non-critical-css,

However ember-component-css compiles all the styles under components folder, Can you pls suggest a work-around to achieve this, We are using ember-component-css 0.4.0 along with ember-cli-sass