3 category: JavaScript libraries
11 - "componentWillLoad()"
12 - "componentWillUpdate()"
16 [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.
28 import { Component, Prop, State } from '@stencil/core'
32 styleUrl: 'my-component.scss'
34 export class MyComponent {
36 @State() isVisible: boolean = true
39 return <p>I am {this.name}!</p>
48 <my-component name='Groot' />
51 That's the same example in the [Readme](https://github.com/ionic-team/stencil), that's as simple as you can get! Just use `<my-component>` like you would use any other HTML tag.
56 export class MyComponent {
60 onChange={(event: UIEvent) => this.inputChanged(event)}
65 inputChanged (event) {
66 console.log('input changed:', event.target.value)
70 {: data-line="5,10,11"}
72 Stencil uses DOM events.
74 See: [Handling user input](https://stenciljs.com/docs/templating/#handling-user-input)
82 <p>This component returns multiple nodes</p>
88 `render()` can return an array of elements.
90 See: [Complex template content](https://stenciljs.com/docs/templating#complex-template-content)
97 export class MyComponent {
98 @State() isVisible: boolean
101 this.isVisible = true
107 Just do assignments. You can't do mutations though, see next section.
109 See: [Managing component state](https://stenciljs.com/docs/decorators#managing-component-state)
111 ### Updating arrays and objects
115 this.names.push('Larry') // ⚠️
116 this.options.show = true // ⚠️
122 this.names = [ ...this.names, 'Larry' ]
123 this.options = { ...this.options, show: true }
126 Mutable operations such as `push()` won't work. You'll need to assign a new copy.
128 See: [Updating arrays](https://stenciljs.com/docs/reactive-data/#updating-arrays)
136 <span>Hello, friends</span>
145 return <h1><slot /></h1>
150 You can pass JSX/HTML as child elements. Use the `slot` tag to use them inside your component.
152 See: [Slots](https://stenciljs.com/docs/templating#slots)
158 <p slot='my-header'>Hello</p>
159 <p slot='my-footer'>Thanks</p>
169 <header><slot name='my-header' /></header>
170 <footer><slot name='my-footer' /></footer>
176 See: [Slots](https://stenciljs.com/docs/templating#slots)
182 | Event | Description |
184 | `componentWillLoad()` | Before rendering |
185 | `componentDidLoad()` | After rendering |
187 | `componentWillUpdate()` | Before updating |
188 | `componentDidUpdate()` | After updating |
190 | `componentDidUnload()` | After unmounting |
192 See: [Component lifecycle](https://stenciljs.com/docs/component-lifecycle)
197 export class MyComponent {
198 componentWillUpdate () {
199 console.log('updating')
206 - [Stencil docs](https://stenciljs.com/docs/) _(stenciljs.com)_