stencil.md

title	category	layout	updated	keywords	intro
Stencil	JavaScript libraries	2017/sheet	2017-10-11	@Component @Prop() @State() render() componentWillLoad() componentWillUpdate() Templating Lifecycle	[Stencil](https://github.com/ionic-team/stencil) is a compiler for web components made by the Ionic team. This guide targets Stencil v0.0.5.

Quick-start guide

{: .-three-column}

Getting started

{: .-prime}

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

{: data-line="5,10,11"}

Stencil uses DOM events.

See: Handling user input

Multiple children

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

{: data-line="3,4"}

render() can return an array of elements.

See: Complex template content

State

Managing state

export class MyComponent {
  @State() isVisible: boolean

  show () {
    this.isVisible = true
  }
}

{: data-line="4,5"}

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>

{: data-line="2"}

Component

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

{: data-line="2"}

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>

{: data-line="2,3"}

Component

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

{: data-line="3,4"}

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)