global css should be removed when component which injected it gets destroyed

[raythurnvoid]

To Reproduce
https://svelte.dev/repl/385622e1aa2d4dd1a538a649761ef50a?version=3.29.0

Expected behavior
I don't really know if this is working as expected, but in a component oriented context i would expect to work the way i'm describing here: Global CSS injected should be removed after the component that contains it is destroyed.

I say so because in this way i would be allowed to style parent elements conditionally to which child is mounted (like in my repl).
With the actual implementation, i'm stuck to use props or context with store to tell in some way the parent which style should he have.

Information about your Svelte project:
Svelte 3.29.0

Severity
Anonoying

[Conduitry]

I don't think there's really a good way to do this without having each component also be responsible for tracking how many instances of it currently exist, so that once it drops back to zero the styles can be removed - which is extra overhead for something that almost everyone will not need.

It's also worth noting that this only really matters with selectors that are purely :global() which generally is somewhat of an undesirable thing to be doing anyway. Any selectors that are even partially scoped to the current component won't have any effect if the styles hang around.

My personal vote on this behavior is that it should be documented somewhere rather than changed.

[raythurnvoid]

I don't think there's really a good way to do this without having each component also be responsible for tracking how many instances of it currently exist, so that once it drops back to zero the styles can be removed - which is extra overhead for something that almost everyone will not need.

It's also worth noting that this only really matters with selectors that are purely :global() which generally is somewhat of an undesirable thing to be doing anyway. Any selectors that are even partially scoped to the current component won't have any effect if the styles hang around.

My personal vote on this behavior is that it should be documented somewhere rather than changed.

Is it at least possibile to pass an id/class to the appended style element in order to easily implements this behaviour manually?

Something like

<style id="my-style-with-globals">...</style>

[intrikate]

This only really matters with selectors that are purely :global() which generally is somewhat of an undesirable thing to be doing anyway.

It may occasionally be desirable to propagate styles upwards from certain components (think Sapper routes wishing to style the document/body), for which :global() in its purest would make sense (if not for the behaviour in question, that is).

I believe this has already been considered (see #1281), but the current behaviour does make certain things annoying.

[raythurnvoid]

It may occasionally be desirable to propagate styles upwards from certain components (think Sapper routes wishing to style the document/body), for which :global() in its purest would make sense (if not for the behaviour in question, that is).

That's exactly my use case, we created some pages, and wanted to apply different css on body element on the basis of the viewed component. Actually we workarounded it by the use of a writable store on a top component which manage to remove and manually set classes with vanilla dom methods.
I think this solution is dirty though.

[ivanhofer]

Is it possible to make a compiler-flag "removeStylesOnDestroy" (or a better name). If the flag is set, additional code will be generated, that tracks the count of currently created instances of an component. When the last component was destroyed, the styles will be removed.
The code would look something like this:

let counter = 0

init( /* options */ ) {

   // code

   counter++
}

and

destroy_component( /* options */)

   // code   

   counter--
   if (counter === 0) {
      // TODO: remove stylesheet
   }

[danielstopp]

This weird issue just bit me too.

In my opinion, this is not only annoying, it is definitely a Svelte bug, since when a component is removed from the DOM, there shouldn't be any traces of it left that affect the rest of the app, that is neither visually nor functionally.

It's also worth noting that this only really matters with selectors that are purely :global() which generally is somewhat of an undesirable thing to be doing anyway

That doesn't make sense to me. :global() is made for what it's named after, setting global styles. Whether this happens in a context that begins in the hierarchy above or below the reference component shouldn't make any difference as to how the app, the component or :global() works, because of the principle of least surprise alone. If that cannot be reasonably done without too much overhead, :global() shouldn't at least be renamed to :childStyles() or something similarly obvious.

If I can set global styles in a component that can be removed programmatically at any time, like all components do, I expect the styles that are part of said component to be removed as well, without any visual of functional traces left afterwards. Period.

This should either be fixed or :global() should be renamed.

[xelius]

I don’t agree. Current behaviour seems very ressonable imo: If you use :global you’re setting styles using standard css behavoiur - affecting the whole document. Hence, those effects are not only ”for” the injecting component but any element that the style targets, effectively ceasing to be tied to the injector comp the moment they are declared... Any other behaviour seems contrived and should (and could) be solved by writing your own specific css handling in onmount/destroy as needed. My 2 cents.

[yuriys-kentico]

I am currently experiencing this, and believe it is unexpected. I have a component, while not a route, that is still basically guaranteed to exist just once on the page. Here's what I have:

<div>
  <body />
</div>

<style>
  @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic,700italic");

  body {
    font-family: Source Sans Pro, sans-serif;
    overflow: hidden;
  }

  div body {
    display: none;
  }
</style>

If I use :global(body), when the user navigates away from the route that has this component, overflow: hidden; stays on body, which breaks the app. It's not ideal to have a random <body> somewhere deep in the tree. Either way, as a compiler I expect Svelte to "do the right thing" every time, so if there's some extra tracking it needs to do to avoid duplicate styles then it should do that.

My point of view is that what the component brings in, it should bring out. Leaving non-scoped styles on the page after the component was destroyed is unexpected and feels like a leak.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.