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. Without a shadow DOM (useShadowDom = false), the <style> is added to the component itself and its rules apply to the whole document.

Give the host a display

A custom element is display: inline by default. Most components need :host { display: block; } (or flex, grid).

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 } 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 and loads 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

Inherited properties, such as color and font-family, pass from the page into the shadow DOM through the host. Other global rules, * included, do not reach inside: style the internals from templateCss(), or expose parts with ::part().

TIP

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