Svelte · Junior · Question 35 of 76

How can a parent style an element inside a child component without breaking scoping?

<!-- Parent.svelte -->
<Child --accent="tomato" />

✓Correct answer: Pass a CSS custom property, which the child uses in its styles with var(--accent)
2Write a selector for the child's element in the parent's <style>
3Use !important in the parent

Explanation

Custom properties keep the child in control of its styles. :global is a fallback for third-party components.

Further reading

Test yourself

Take the Svelte · Junior quiz: questions and options are shuffled, and you get a review of your mistakes at the end.