Svelte: Svelte disable remove css

Created on 7 Aug 2019 · 5Comments · Source: sveltejs/svelte

If i have some html and i insert it into my svelte component via

{@html thing}

i can't style it because svelte is removing my html.
Idea is nice but in practice i think the warning is all that is needed and not to remove the style as well.

if in my style tag

<style keep>
</style>

i could do something like this it would be really nice for those times you want to intentionally keep something.

My issue is i have an svg that i am inlining thru webpack.

But it takes up the entire page,
Now i want to just style it, but i can't

Source

shavyg2

👍4

Most helpful comment

I would be interested in this too. Can we re-open?

Use case: a component is including a third-party javascript library that dynamically alters the dom on page load. I'd like to have my custom styles for that in my component, but svelte removes them since it senses they aren't used. I could put these in "global.css" to get around this, but then the styles are not scoped to my component.

gavinr on 13 Dec 2019

👍19

All 5 comments

Those styles would be scoped as normal and would then not apply to the html your included using {@html x}.

pngwn on 7 Aug 2019

I believe there's an issue somewhere about a way to mark a whole bunch of styles in a component at once in as being global. Not that we're necessarily planning on implementing that, but that would be how this would be handled. Svelte is only removing styles that won't match any of the elements that it's going to add this component's scoping class to.