Polymer element lifecycle

Lightning talk from the Modern Web UI meetup: http://www.meetup.com/modernwebui/events/228534967/

Polymer site: www.polymer-project.org
Notes & references from this talk: https://goo.gl/LLrgDq

Transcript

1. Polymer element lifecycle Arthur Evans @devdocdude
2. Is my
 element READY YET?
3. Polymer({ is: ‘my-element’, whenReady: function() { initializeAllTheThings(); } });
4. Polymer({ is: ‘cup-cake’, whenBaked: function() { eat(); } });
5. Custom elements are not baked goods
7. HTMLElement Custom Element
9. created Element’s prototype chain is set up, properties and local DOM are NOT initialized yet. What should I do in created? • Not a lot. • (You can set properties here before any observers run.)
10. ready Properties and local DOM are initialized. What should I do in ready? • One-time initialization that requires access to statically-created local DOM and/or initial property values. • But remember, properties can change. (Spoiler alert: observers are your friends.)
11. What can’t I do in ready? • Access light DOM children. • Access dynamically-created local DOM children created by a dom- repeat, or dom-if. • Measure the current element (or its local DOM children). • (Remember, the element might not be in the DOM tree yet.)
12. attached What should I do in attached? • Add listeners for global events, like resize or hashchange. • Measure the current element (or its local DOM children).
13. detached What can I do in detached? • Remove event listeners. • Undo anything you did in attached.
14. The other stuff
15. What about properties? • React to property changes with data bindings and observers. • Observers are a big topic. Rob has a polycast! http://bit.ly/polycast-observers
16. What about light DOM children? • Get lazy. Only check your light DOM children on demand. • If that doesn’t work: observeNodes gives you a callback when children are added or removed. • Remember to unobserveNodes in detached!
17. The takeaway • Butterflies, not cupcakes • Everything changes, so think reactive • Put observers to use • Lazy is good, too
18. • Arthur Evans
 @devdocdude • Notes: • https://goo.gl/LLrgDq Thank You