Others

☝️ Watch out

Modern frameworks like React, Vue, or Preact vary in support for web components and some require some extra work to translate between the framework's environment and a native web component.

Cosmos is built on top of native web components and theoretically allows it to be integrated into any frontend codebase ranging from Vanilla Javascript to modern Javascript frameworks.

The support for web components varies between the frameworks and some require some translation work between the framework and web components. Please refer to the framework's documentation to determine how web components can be integrated.

Cosmos exports some Typescript Definitions that will make the type-safe integration into codebases easier:

JSX Intrinsic Elements

The custom elements of Cosmos are unknown to JSX and Typescript will report an error as soon as a components tag like <cosmos-button /> is used.

The Cosmos library distributes a definition to add all Cosmos custom elements to the global Intrinsic Elements definition of a Typescript project.

import type { JSX } from "@cosmos/web";


// Add Intrinsic Elements to allow Cosmos custom elements tag names to be used in JSX
type LocalIntrinsicElements = JSX.IntrinsicElements;

declare global {
  namespace JSX {
    interface IntrinsicElements extends LocalIntrinsicElements {}
  }
}

Property Types

Cosmos exposes a type definition for the Properties each component is able to accept.

import type { JSX } from "@cosmos/web";

const buttonProps : JSX.CosmosButton = {
  kind: "secondary",
  size: "small"
}

Custom Element Types

In rare cases, referencing an HTML custom element might be required to use Javascript DOM APIs or public methods the web component exposes. The Cosmos library also exposes a type definition for those cases.

import type { Components } from "@cosmos/web";

const tooltip : Components.CosmosTooltip =  document.querySelector('cosmos-tooltip');

tooltip.update();