How do you bypass Svelte's scoped styles to target global elements?

What's really being asked

This question probes your understanding of Svelte's compile-time style encapsulation and whether you know the sanctioned escape hatch. At the senior level, interviewers want to see that you can balance component isolation against legitimate global styling needs, and that you understand the downstream maintenance cost of breaking scope.

The full answer

First, name the global modifier, written as :global() in the style block. In a Svelte component, you wrap a selector with :global(body) to target the body element, or use :global(.my-class) to apply unscoped rules to a class. Second, explain the mechanism: Svelte normally appends a unique hashed class to selectors and elements; :global() tells the compiler to omit that hash for the wrapped portion. Third, discuss maintainability risks. Global styles leak side effects across routes and pages, making refactors dangerous because deleting a component no longer reliably removes its CSS. They invite specificity wars when multiple components compete to style the same global element. They also obscure dependencies; a future developer cannot tell by looking at a global element which components own its styles. Fourth, mention alternatives for legitimate use cases, such as a top-level layout component, a global CSS file imported in the app entry, or svelte:body for body-specific events and properties, though the latter does not itself unscope CSS.

The mistakes people make

Claiming it is impossible to target body or globals from inside a Svelte component. Proposing inline styles as the primary solution for global theming. Suggesting an external stylesheet without acknowledging that it bypasses Svelte's dead-code elimination and component-level co-location. Saying :global() is safe to use liberally without mentioning side effects or encapsulation breaks.

What usually comes next

How would you style body only on a specific route without affecting others? When is a global CSS file preferable to :global() inside a component? How does Svelte's scoping hash generation work under the hood? What happens to unused styles in Svelte, and how does :global() change that behavior?

A concrete example

Imagine a modal component that needs to lock body scroll when open. A junior might write :global(body) { overflow: hidden; } inside the modal. A senior answer notes the risk: if the modal unmounts unexpectedly or another component also toggles body overflow, the states collide. The better pattern is to centralize body-scroll management in a layout store or action, and if CSS is required, to scope it through a global utility class that is explicitly documented in a design system, rather than hiding the rule inside a single component.