How does Svelte scope component styles during compilation?

WHAT THIS TESTS: This question checks whether you understand that Svelte is a compiler, not a runtime library, and that its style scoping is a static build step rather than a browser feature. Interviewers want to see you can articulate how Svelte manipulates both the markup and the CSS before anything reaches the browser.

A GOOD ANSWER COVERS: First, state that Svelte parses the component template and the style block at compile time. Second, explain that the compiler generates a unique scoped identifier, often a short hash based on the component filename or content. Third, describe that this identifier is added as an attribute to every HTML element in the component's template. Fourth, note that the compiler rewrites each CSS selector in the style block so it includes that identifier, meaning the final CSS only matches elements inside this component. Fifth, mention that this happens entirely during compilation, leaving zero runtime scoping code in the output.

COMMON WRONG ANSWERS: A major red flag is claiming Svelte uses shadow DOM or CSS Modules under the hood. Another is saying the browser handles the scoping natively. Some candidates incorrectly describe a runtime system where JavaScript injects styles or adds classes dynamically. These answers reveal a misunderstanding of Svelte's compile-first philosophy and the fact that scoped styles are a pure build-time transformation.

LIKELY FOLLOW-UPS: An interviewer might ask how to opt out of scoping with the global modifier. They could ask how Svelte handles unused style removal, or how it processes nested style elements. You might also be asked to compare Svelte's approach to CSS-in-JS or to Vue's scoped styles, which use similar attribute tricks but differ in implementation details.

ONE CONCRETE EXAMPLE: Imagine a component with a button element and a style block setting the color to red. During compilation, Svelte might add a scoped marker such as svelte-abc123 to the button element and rewrite the CSS selector to button.svelte-abc123. If another component also styles its button, it receives a different hash, so the two rules never collide. The shipped JavaScript contains no scoping logic; the CSS file simply has transformed selectors.