Understanding Stencil.js

Possibly save 1 hour of your time: Here are some resources that I have used to learn Stencil.js.


  • @Prop
    • Props are custom attribute/properties exposed publicly on the element.
    • string, number, boolean, object, array
    • Children components should not know about or reference parent components, so Props should be used to pass data down from the parent to the child.
    • By default, when a member decorated with a @Prop() decorator is set, the component will efficiently re-render.
    • It’s important to know, that @Prop is immutable from inside the component logic. Once a value is set by a user, the component cannot update it internally.
    • Within the component class, the Props are accessed via the this operator.
    • Externally, Props are set on the element.
    • They can also be accessed via Javascript from the element.
  • @PropWillChange and @PropDidChange
  • @State
    • can be used to manage internal data for a component. This means that a user cannot modify the property from outside the component, but the component can modify it how ever it sees fit.
    • Any changes to a @State() property will cause the components render function to be called again.
  • @Method
    • used to expose methods on the public API.
    • Functions decorated with the @Method() decorator can be called directly from the element.





Getting Started




Understanding Component, Prop, State, Event, EventEmitter, Listen:


Understanding Constructor:


Understanding :



Lots of resources here:



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s