WebComponents.dev

Stencil

Source file extensions: .ts|.tsx

Stencil is a toolchain for building reusable, scalable Design Systems. Generate small, blazing fast, and 100% standards based Web Components that run in every browser.

Component

index.tsx

/* @jsx h */
import { h } from '@stencil/core';
import { Component, Prop, h } from '@stencil/core';

@Component({
  tag: 'my-first-component',
})
export class MyComponent {
  @Prop() name: string;

  render() {
    return <p>My name is {this.name}</p>;
  }
}

Stories

Stencil JSX can be used in stories with the pragma @jsx.

/* @jsx h */
import { h } from '@stencil/core';
import './my-counter.tsx';

export const story1 = () => <my-counter></my-counter>;

Documentation

See MDX.

References