I’m using svelte to create a blog about cooking. I am getting data from a CMS that is returning HTML. I know that part of that html will be an unordered list. I’d like to style that list but my attempts are not working.
Here is my div.
Here is my css selector.
And finally here is the DOM just to be sure that it’s outputting what I expect.
Is there a different way to approach this? Thank you.
>Solution :
Does this work for you? :global()
https://svelte.dev/docs#component-format-style
<script>
const cmsData = "<ul><li>hey</li></ul>"
</script>
<div class="content">
{@html cmsData}
</div>
<style>
.content :global(ul) {
color: red;
}
</style>