core/styling

34 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Style blocks in Svelte components are scoped

CSS written in the style block of a Svelte component is automatically scoped to that component only. In the example, the button style rule only applies to button elements within that specific component.

<style> block scoping

CSS inside a <style> block is automatically scoped to that component. Selectors like 'p' will only affect <p> elements within that component, not globally.

Using :global modifier with {@html} injected content

To style HTML injected via {@html}, use the :global modifier on the parent selector. For example, article :global { a { color: hotpink } img { width: 100% } } will apply styles to all <a> and <img> elements inside the article element that was populated with {@html} content.

{@html} content is invisible to Svelte styling

Content rendered with {@html} is invisible to Svelte and will not receive scoped styles. Scoped styles defined in the component's <style> block will not apply to HTML injected via {@html}.

Scoped keyframes in components

If a component defines @keyframes, the name is scoped to the component using the same hashing approach. Any animation rules in the component will be similarly adjusted, so keyframes are only accessible inside that component.

Scoped style specificity increase

Each scoped selector receives a specificity increase of 0-1-0, as a result of the scoping class (e.g. .svelte-123xyz) being added to the selector. This means that a selector defined in a component will take precedence over the same selector defined in a global stylesheet, even if the global stylesheet is loaded later.

Scoped styles in components

Svelte components can include a <style> element containing CSS that belongs to the component. This CSS is scoped by default, meaning that styles will not apply to any elements on the page outside the component in question. This works by adding a class to affected elements, which is based on a hash of the component styles (e.g. svelte-123xyz).

Multiple scoping class additions use :where()

In cases where the scoping class must be added to a selector multiple times, after the first occurrence it is added with :where(.svelte-xyz123) in order to not increase specificity further.

Global keyframes with -global- prefix

To make @keyframes accessible globally, prepend the keyframe name with -global-. The -global- part is removed during compilation, and the keyframe is then referenced using just the name without the prefix elsewhere in the code.

:global block for group of selectors global styles

To apply styles to a group of selectors globally, create a :global {...} block. All selectors inside this block apply to every matching element in the application. You can also use a scoped context like .a :global {...} to apply styles globally only within elements matching .a in the component, or equivalently as .a :global .b .c .d, though the nested form is preferred.

:global(...) modifier for single selector global styles

The :global(...) modifier applies styles to a single selector globally. For example, :global(body) applies to the body element, and div :global(strong) applies to all strong elements inside div elements belonging to the component. The p:global(.big.red) syntax applies to p elements with class="big red" even if the class is applied programmatically.

CSS custom properties desugaring to wrapper element

When you pass CSS custom properties to a component, Svelte desugars this to a wrapper element. For regular components, it uses `<svelte-css-wrapper style="display: contents; --property: value">`. For SVG elements, it uses `<g style="--property: value">` instead.

Reading CSS custom properties inside components

Inside a component, custom properties passed from parent can be read using the CSS `var()` function with optional fallback values. For example: `background: var(--track-color, #aaa);` uses the custom property `--track-color` with fallback value `#aaa`.

CSS custom properties inherited from parent elements

Custom properties do not need to be specified directly on the component element. They are inherited from parent elements if defined there. It is common to define custom properties on the `:root` element in a global stylesheet so they apply to the entire application.

CSS custom properties wrapper element affects combinators

The extra wrapper element generated by CSS custom properties does not affect layout due to `display: contents`, but it does affect CSS selectors using combinators like `>` that target elements directly inside the component's container.

CSS custom properties syntax on components

CSS custom properties can be passed to components using the `--property-name` syntax. Both static values and dynamic expressions are supported. For example: `<Slider --track-color="black" --thumb-color="rgb({r} {g} {b})" />`

One top-level style tag per component

Each Svelte component can only have one top-level <style> tag.

Nested style tags do not apply scoping

When a <style> tag is nested inside other elements or logic blocks, the styles in that tag will apply globally to matching elements in the entire DOM, not just within the component.

Nested style tags are inserted as-is

A <style> tag nested inside other elements or logic blocks will be inserted as-is into the DOM without scoping or processing applied.

Style child components with CSS custom properties

The CSS in a component's <style> is scoped to that component. If a parent component needs to control the child's styles, the preferred way is to use CSS custom properties. For example, Parent.svelte passes <Child --color="red" /> and Child.svelte uses color: var(--color) in its style block.

Use CSS custom properties via style: directive for JS variables in CSS

If you have a JS variable that you want to use inside CSS you can set a CSS custom property with the style: directive. For example: <div style:--columns={columns}>...</div>. You can then reference var(--columns) inside the component's <style>.

Use :global to override child component styles when CSS custom properties impossible

If styling child components with CSS custom properties is impossible (for example, the child component comes from a library) you can use :global to override styles. For example: div :global { h1 { color: red; } }.

Replace class: directive with clsx-style arrays and objects

Use clsx-style arrays and objects in class attributes, instead of the class: directive.

Augmenting svelte/elements module for custom types

Custom or experimental attributes and events can be typed by augmenting the svelte/elements module in a .d.ts file. Add new elements to SvelteHTMLElements interface, add global attributes to HTMLAttributes<T> interface, or add element-specific attributes to specific interfaces like HTMLButtonAttributes. Reference the .d.ts file in tsconfig.json include pattern.

Custom element styles are encapsulated and inlined

Styles in custom elements are encapsulated rather than scoped (unless `shadow: 'none'` is set). Non-component styles like those in a global.css file will not apply to the custom element, including styles with `:global(...)` modifier. Styles are inlined as a JavaScript string instead of extracted to a separate CSS file.

Global styles with :global() selector

When you need to style something that Svelte cannot identify at compile time, use :global(...) to explicitly opt into global styles. You can wrap :global() around only part of a selector. For example, .foo :global(.bar) { ... } will style any .bar elements that appear within the component's .foo elements, using a parent element in the current component to scope it partially.

Svelte styles scoping mechanism

Svelte removes unused styles from components. The style scoping works by generating a class unique to the component, adding it to relevant elements in the component, and then adding it to each selector in the component's styles. If Svelte cannot see what elements a style selector applies to at compile time, it will either not match the expected elements or become global, affecting the entire page.

Scoped CSS uses :where() modifier

Svelte 5 scoped CSS selectors use :where(.svelte-hash) alongside .svelte-hash to avoid specificity issues. Ancient browsers without :where() support need CSS manual processing.

svelte-css-wrapper element replaces div for CSS custom properties

In Svelte 5, an extra <svelte-css-wrapper> element is used instead of a <div> to wrap the component when using CSS custom properties (--style-props).

CSS hash position no longer deterministic

In Svelte 5, the position of the CSS hash is no longer guaranteed to be last. This only breaks if you have very unusual CSS selectors that depend on the hash position.

:is(), :has(), :where() selectors are scoped

In Svelte 5, Svelte analyzes selectors inside :is(), :has(), and :where() in the context of the current component. Use :global() inside these selectors to prevent scoping if needed.

Styling documentation location

The Svelte styling documentation is a generated file located in the svelte.dev repository at apps/svelte.dev/content/docs/svelte/04-styling/index.md. It should not be edited directly as it is generated by apps/svelte.dev/scripts/sync-docs/index.ts.

css_unused_selector warning

The `css_unused_selector` warning alerts when a CSS selector in the `<style>` tag is not used in the template. Unused selectors are removed by the compiler. To preserve selectors that target elements not visible to the compiler (such as in `{@html ...}` tags or child component overrides), use the `:global` pseudo-class.

css_global_block_invalid_list error

A :global selector cannot be part of a selector list with non-global selectors. For example, `:global, x { y { color: red; } }` is invalid because it mixes scoped and unscoped selectors. Split into separate blocks: one :global block and one scoped block.

Give your agent this brain