Component styles

info

This section applies to component-specific styles. For global styling in your theme see styling

Component stylesheets are stored in a matching .scss file, next to the component they apply to. The .ts and .scss files for a component must use the same filename, except for the extensions.

When the component tag is present on a page, the styles for that component will be loaded automatically (more details.)

tip

Liquid in SCSS is available inside of component styles.

FooComponent.ts

src/components/FooComponent.ts
ts
import { Component, Prop, Ref } from '@eastsideco/salvo-ts';
import { ThemeComponent } from '@/theme/ThemeComponent';
 
@Component
class FooComponent extends ThemeComponent {
}

src/components/FooComponent.ts
ts
import { Component, Prop, Ref } from '@eastsideco/salvo-ts';
import { ThemeComponent } from '@/theme/ThemeComponent';
 
@Component
class FooComponent extends ThemeComponent {
}

FooComponent.scss

src/components/FooComponent.scss
scss
.FooComponent {
    display: block;
    background: white;
    color: liquid("{{ settings.text_color }}");
    --input-border-color: #AAA;
    &__Form {
        border-color: #333;
    }
    &__Input {
        border-color: var(--input-border-color);
    }
    &--isError {
        --input-border-color: #F00;
    }
}

src/components/FooComponent.scss
scss
.FooComponent {
    display: block;
    background: white;
    color: liquid("{{ settings.text_color }}");
    --input-border-color: #AAA;
    &__Form {
        border-color: #333;
    }
    &__Input {
        border-color: var(--input-border-color);
    }
    &--isError {
        --input-border-color: #F00;
    }
}

Usage
html
<foo-component class="FooComponent FooComponent--isError">
    <div class="FooComponent__Form">
        <input class="FooComponent__Input"/>
        ...
    </div>
</foo-component>

Usage
html
<foo-component class="FooComponent FooComponent--isError">
    <div class="FooComponent__Form">
        <input class="FooComponent__Input"/>
        ...
    </div>
</foo-component>

Remember to set a display mode

As custom elements, components don't have any base vendor styles. They are usually treated as inline-like, similar to a span. For more consistent behavior, remember to define a display mode like display: block or display: inline on your top-level component element.

Prefer component styles over global styles

Component styles can be better optimized, and help keep a single source for truth for how a component is styled. Avoid including styles for components in your global styles, which should be reserved for top-level concerns things like typography or third-party apps.