Stencil is a compiler for web components made by the Ionic team. This guide targets Stencil v0.0.5.

Quick-start guide

Getting started


import { Component, Prop, State } from '@stencil/core'

  tag: 'my-component',
  styleUrl: 'my-component.scss'
export class MyComponent {
  @Prop() name: string
  @State() isVisible: boolean = true

  render () {
    return <p>I am {}!</p>


<my-component name='Groot' />

That’s the same example in the Readme, that’s as simple as you can get! Just use <my-component> like you would use any other HTML tag.

DOM events

export class MyComponent {
  render () {
    return (
        onChange={(event: UIEvent) => this.inputChanged(event)}

  inputChanged (event) {
    console.log('input changed:',

Stencil uses DOM events.

See: Handling user input

Multiple children

render () {
  return [
    <h1>Hello there</h1>,
    <p>This component returns multiple nodes</p>

render() can return an array of elements.

See: Complex template content


Managing state

export class MyComponent {
  @State() isVisible: boolean

  show () {
    this.isVisible = true

Just do assignments. You can’t do mutations though, see next section.

See: Managing component state

Updating arrays and objects

✗ Bad

this.names.push('Larry')  // ⚠️ = true  // ⚠️

✓ OK

this.names = [ ...this.names, 'Larry' ]
this.options = { ...this.options, show: true }

Mutable operations such as push() won’t work. You’ll need to assign a new copy.

See: Updating arrays


Using slot

  <span>Hello, friends</span>


render() {
  return <h1><slot /></h1>

You can pass JSX/HTML as child elements. Use the slot tag to use them inside your component.

See: Slots

Multiple slots

  <p slot='my-header'>Hello</p>
  <p slot='my-footer'>Thanks</p>


render () {
  return <div>
    <header><slot name='my-header' /></header>
    <footer><slot name='my-footer' /></footer>

See: Slots


Lifecycle hooks

Event Description
componentWillLoad() Before rendering
componentDidLoad() After rendering
componentWillUpdate() Before updating
componentDidUpdate() After updating
componentDidUnload() After unmounting

See: Component lifecycle


export class MyComponent {
  componentWillUpdate () {


0 Comments for this cheatsheet. Write yours!