Stencil cheatsheet

Quick-start guide

Getting started

JavaScript

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

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

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

HTML

<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 (
      <input
        onChange={(event: UIEvent) => this.inputChanged(event)}
      />
    )
  }

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

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

State

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')  // ⚠️
this.options.show = 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

Slots

Using slot

<my-component>
  <span>Hello, friends</span>
</my-component>

Component

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

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

Component

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

See: Slots

Lifecycle

Lifecycle hooks

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

See: Component lifecycle

Example

export class MyComponent {
  componentWillUpdate () {
    console.log('updating')
  }
}

References

Stencil docs (stenciljs.com)