README.md

Custom Elements - lifecycle Hooks

Goals:

• Learn about Native's lifecycles hooks
• Learn about all the Stencil's lifecycles hooks
• Learn about @State decorator

Commands

• Server : npm run start-02
• Tests : npm test -- -t 02

Files to modify

1. components/stencil-hello/stencil-hello.tsx

Description

1. Start a counter with the lifecycle equivalent to connectedCallback (in native specs) hook using @state.
2. At the beginning the DOM should be <div>0</div> but after 10 seconds the DOM should be <div>10</div>.
3. Clean the counter reference in the lifecycle equivalent to disconnectedCallback (in native specs) hook

Next

Custom Elements - Props