Add Style with templateCss()

The templateCss() method defines the CSS styles applied to the component. It is meant to be overridden by subclasses that want to customize or extend the styling of their component. The returned string should contain valid CSS rules. These styles are injected into the component’s shadow DOM, ensuring proper encapsulation and preventing leakage into the global stylesheet.

Signature

  templateCss(): string;

Parameters

• none

Return values

• A string containing the CSS rules for the component.

Examples

import { Jadis, css, createSelector } from '@jadis/core';

...

class ClickButton extends Jadis {
  static selector = createSelector('click-button');

  templateCss() { 
    return css`button { padding: 0.5rem; font-size: 1rem; }`; 
  } 

  templateHtml() {
    ...
  }

  ...
}

Isolate CSS in a separate file

A more convenient way to style a component is to isolate CSS in a separate file that you import with the special ?inline query if you are using Vite.

import { Jadis, createSelector, css, createSelector } from '@jadis/core';
import style from './your-css-file.css?inline'; 

class ClickButton extends Jadis {
  static selector = createSelector('click-button');

  templateCss() {
    return style;
  }

  templateHtml() {
    ...
  }

  ...
}

See documentation about toggling classes in components.

INFO

?inline is Vite specific in order to load css as plain text in a variable.

TIP

CSS variables can traverse the shadow DOM You might want to use them for font-styles, sizes and such on the :root element.

TIP

The universal CSS selector * allows style to be applied through shadow DOM.

TIP

Check out documentation about shadow DOM and the :host() pseudo-class.