--- title: Stencil category: JavaScript libraries updated: 2019-05-08 keywords: - "@Component" - "@Prop()" - "@State()" - "render()" - "componentWillLoad()" - "componentWillUpdate()" - "Templating" - "Lifecycle" intro: | [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 ```js 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
I am {this.name}!
) } } ``` #### HTML ```htmlThis component returns multiple nodes
] } ``` {: data-line="3,4"} `render()` can return an array of elements. See: [Complex template content](https://stenciljs.com/docs/templating#complex-template-content) ## State ### Managing state ```js 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](https://stenciljs.com/docs/decorators#managing-component-state) ### Updating arrays and objects #### ✗ Bad ```js this.names.push('Larry') // ⚠️ this.options.show = true // ⚠️ ``` #### ✓ OK ```js 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](https://stenciljs.com/docs/reactive-data/#updating-arrays) ## Slots ### Using slot ```htmlHello
Thanks