JSX and css()

Jadis 1.0 uses JSX for component templates and keeps css() as the helper for interpolated component styles. Component templates are real DOM nodes, not HTML strings.

JSX

Configure TypeScript or JavaScript with the automatic JSX runtime:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@jadis/core"
  }
}

Then return a real Node from templateHtml():

import { Jadis } from '@jadis/core';

class HelloCard extends Jadis {
  static readonly selector = 'hello-card';

  templateHtml(): Node {
    return <p>Hello from JSX</p>;
  }
}

For projects without a JSX transform, use createElement().

css()

Concatenates template literal parts with interpolated values into a CSS string.

Signature

css(strings: TemplateStringsArray, ...args: (string | number | boolean)[]): string;

Example

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

class StyledCard extends Jadis {
  static readonly selector = 'styled-card';

  templateCss(): string {
    return css`
      :host { display: block; }
      :host { color: #3b82f6; }
    `;
  }
}

See also

• Templates
• Styles