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