## Pages ### scoped-styles Component styles are automatically scoped via hash-based classes with +0-1-0 specificity; @keyframes are scoped and animation rules auto-adjusted. ## Scoped Styles Svelte components can include a ` ``` **Specificity**: Each scoped selector receives a specificity increase of 0-1-0 from the scoping class. This means component styles take precedence over global stylesheets, even if the global stylesheet loads later. When the scoping class must be added multiple times to a selector, subsequent occurrences use `:where(.svelte-xyz123)` to avoid further specificity increases. **Scoped Keyframes**: `@keyframes` defined in a component are scoped using the same hashing approach. Animation rules referencing these keyframes are automatically adjusted: ```svelte ``` ### global_styles :global(...) and :global {...} modifiers for applying styles globally; -global- prefix for global @keyframes ## :global(...) modifier Apply styles to a single selector globally using the `:global(...)` modifier: ```svelte ``` For globally accessible @keyframes, prepend the keyframe name with `-global-`. The prefix is removed during compilation: ```svelte ``` ## :global block Apply styles to a group of selectors globally using a `:global {...}` block: ```svelte ``` Alternatively, use `.a :global .b .c .d` syntax where everything after `:global` is unscoped (nested form preferred). ### custom-properties Pass CSS custom properties to components with `--name` syntax; they desugar to wrapper elements and are read via `var(--name, fallback)` inside components; inherit from parents and can be defined globally. ## Passing CSS Custom Properties to Components Pass CSS custom properties (both static and dynamic) to components using the `--property-name` syntax: ```svelte ``` This desugars to a wrapper element with the custom properties in its style attribute. For regular components, a `` is used. For SVG elements, a `` element is used instead: ```svelte

``` ## Reading Custom Properties Inside Components Inside a component, read custom properties using CSS `var()` function with optional fallback values: ```svelte ``` ## Inheritance and Global Definition Custom properties don't need to be specified directly on the component—they inherit from parent elements. Define them on the `:root` element in a global stylesheet to apply them application-wide. ## Layout Caveat The wrapper element (`display: contents` or ``) doesn't affect layout but will affect CSS selectors using the `>` combinator that target elements directly inside the component's container. ### nested-style-elements Nested style tags bypass Svelte's scoping and apply globally to the DOM. Svelte components can have only one top-level ` ``` In this case, the nested `

Styling