Component API

The whole API provided by stencil can be condensed in a set of decorators, lifecycles hooks and rendering methods.


Decorators are a pure compiler-time construction used by stencil to collect all the metadata about a component, the properties, attributes and methods it might expose, the events it might emit or even the associated stylesheets. Once all the metadata has been collected, all the decorators are removed from the output, so they don't incur in any runtime overhead.

  • @Component() declares a new web component
  • @Prop() declares an exposed property/attribute
  • @State() declares an internal state of the component
  • @Watch() declares a hook that runs when a property or state changes
  • @Element() declares a reference to the host element
  • @Method() declares an exposed public method
  • @Event() declares a DOM event the component might emit
  • @Listen() listens for DOM events

Lifecycle hooks


  • Host
  • h
  • getAssetPath
  • readTask
  • writeTask
  • setMode()
  • getMode()
  • getElement()
  • JSX