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

## 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)

0 Comments for this cheatsheet. Write yours!