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
connectedCallback() disconnectedCallback() componentWillLoad() componentDidLoad() componentShouldUpdate(newValue, oldValue, propName): boolean componentWillRender() componentDidRender() componentWillUpdate() componentDidUpdate() - render()
In addition to component-specific lifecycle hooks, a special event called
appload will be emitted when the app and all of its child components have finished loading. You can listen for it on the
window object.
If you have multiple apps on the same page, you can determine which app emitted the event by checking
event.detail.namespace. This will be the value of the
namespace config option you've set in your Stencil config.
window.addEventListener('appload', (event) => {
console.log(event.detail.namespace);
});
Host : Host is a functional component that can be used at the root of the render function to set attributes and event listeners to the host element itself.h(): It's used within the
render()to turn the JSX into Virtual DOM elements.readTask(): Schedules a DOM-read task. The provided callback will be executed in the best moment to perform DOM reads without causing layout thrashing.
writeTask(): Schedules a DOM-write task. The provided callback will be executed in the best moment to perform DOM mutations without causing layout thrashing.
forceUpdate(): Schedules a new render of the given instance or element even if no state changed. Notice
forceUpdate()is not syncronous and might perform the DOM render in the next frame.getAssetPath(): Gets the path to local assets. Refer to the Local Assets page for usage info.
setMode()
getMode()
getElement()
