Skip to main content

Stencil

Stencil is a compiler for generating Web Components. It combines the best concepts of modern frameworks — reactive data-binding, TypeScript, and JSX — into a tool that produces standards-compliant custom elements.

Usage​

Demo​

show code
import { createPlayground } from 'livecodes';

const options = {
  "template": "stencil"
};
createPlayground('#container', options);

Component Syntax​

Stencil components are written in TypeScript with decorators and JSX. They are rendered as custom HTML elements:

import { Component, Prop, State, h } from "@stencil/core";

@Component({
  tag: "my-counter",
  styles: `button { font: 1em sans-serif; }`,
})
export class MyCounter {
  @Prop() label: string;
  @State() count = 0;

  render() {
    return (
      <div>
        <p>{this.label}: {this.count}</p>
        <button onClick={() => this.count++}>Click me</button>
      </div>
    );
  }
}

The component is then used in HTML as a custom element:

<my-counter label="Counter"></my-counter>

Language Info​

Name​

stencil

Extensions​

.stencil.tsx

Editor​

script

Compiler​

Stencil compiler

Version​

@stencil/core: v3.2.2

Code Formatting​

Using Prettier.

Custom Settings​

Custom settings added to the property stencil are passed as transpile options to the Stencil compiler. Please check the documentation for full reference.

Please note that custom settings should be valid JSON (i.e. functions are not allowed).

Example:

Custom Settings
{
  "stencil": {
    "target": "es2019"
  }
}

Starter Template​

https://livecodes.io/?template=stencil

Sponsors