Create a Custom Element using Polymer

Use Lifecycle Callbacks On Custom Polymer Elements

Style Custom Elements in Polymer

Extend Native HTML Elements with Polymer

Understand Declared Property Basics in Polymer

Data Bind Two Polymer Elements

Observe Property Changes on a Custom Polymer Element

Create Event Listeners in Polymer Elements

Execute Custom Events in Polymer

Iterate over a Collection with Polymer's dom-repeate

Creating Custom Web Elements with Polymer 2

In this lesson we'll look at the lifecycle callbacks (Created, Ready, Attached, Detached, and attributeChanged) available to us in Polymer and how to use each one.

[00:00] Hey, guys. In this video, we're going to talk about Polymer lifecycle callbacks. To do that, I've created a quick little element here, called lifecycleElement. In our template, I'm going to have a button that says, "Hello world." While I'm in here, I'm going to go ahead and give that guy an ID of "BTN" for button.

[00:21] To get us started, I am going to go ahead and just write out all of the lifecycle phases here. The first one, which maps directly to Web Components, is created. Whereas in Web Components it's createdCallback, in Polymer, they have simply shortened it to created.

[00:40] The next one is ready, which is specific to Polymer. It's one that they've inserted here. It's not in standard Web Components. The next one is attached. Again, that one maps directly to Web Components API as attachedCallback.

[00:55] The next one is detached. Again, another one that maps directly to Web Components as detachedCallback. Then, finally, attributeChanged.

[01:07] To take a look at each of these, I'm actually going to create a custom method here called "log." We're just going to console.log some asterisks here, plus cycle, which we'll pass in. Then we're just going to go ahead and do that for each of these guys. This.log created, ready, attached, and detached. We'll take a look at attributeChanged in just a moment.

[01:32] I'm going to go ahead and save this. Load it up over here. We can see that we've got created, ready, and attached. Obviously, we don't have detached because that represents a lifecycle callback when we actually remove our element from the DOM.

[01:47] The first thing we can notice is all of them have access to this. In this instance, this is our actual Polymer element. Here, in our created phase, I'm going to create an event listener for click. We'll just say, "this.remove," which should trigger our detached lifecycle phase. Click on "Hello world." We can see detached was actually executed.

[02:10] In created, which is really just an equivalent to document.registerElement, we simply have access to our element, nothing else. In ready, we actually have access to our local DOM, which is represented by this button here inside of our template.

[02:25] Ready isn't really very different from attached, other than ready will only be called once our local DOM has been fully processed. The ready of any nested Polymer elements would have fired by the time this one fires.

[02:41] I'm going to do this also, log out. Let's see. If we have access to our local DOM, which can be accessed through this.$, we'll just console. [inaudible] , this.$.button, which should be our button if we have access to it.

[02:58] I'm going to go ahead and save that. We'll take a look over here. We can see that created did not have access to the local DOM. Ready did have access to the local DOM and Attached had access to the local DOM. If we remove it, detached also has access to the local DOM.

[03:13] To get a look at the attributeChanged lifecycle method, I'm going to create a method here called "updateAttribute." We'll have this work just like our log method. We'll say, "this.setAttribute." We'll just make it the class. We'll set that to cycle, and then we'll just call that here on our log with our cycle.

[03:35] Here, in our attributeChanged, which is going to take in the name of the attribute, the previous value, and the new value, we're just going to log out string. That's changed to string from string. Then we'll pass in our name, old value. Sorry. That's going to be new value and then old value.

[04:04] We can see that even though it was called a little bit out of order, we were able to see that class was changed from null to created, and then it was changed from created to ready. Then it was changed from ready to attached. If we click this guy, we'll see it's changed from attached to detached.

[04:23] Created is when our component has been registered. Ready is when our local DOM has been processed. Attached is when our Polymer element is in the DOM. Detached is when we remove it from the DOM.

[04:36] In detached, what we want to use that for is any sort of cleanup, like you might in a backbone view with your dispose or in a React component. We'll unmount something along those lines. What I'm going to do is say, "this.ticker =." I'm going to set an interval here for this.tick. We'll bind that to this. We'll run that every half second.

[05:02] I'm going to go ahead and create that method here. Tick. We'll just say, "this.setAttribute something random data-ID." We'll just set that to Math.random. To take a look at that, before I alter the detached lifecycle, I'm going to go ahead and save this. Load it up over here. We can see that the data changes are happening.

[05:27] When I remove it, the data changes are still happening. We can use detached to go ahead and say, "clearInterval this.ticker." That way, when we remove it, we'll go ahead and get rid of the potential memory leak. I go ahead and close that. We can see that the ticker interval has stopped.

Course

Creating Custom Web Elements with Polymer 2

Use Lifecycle Callbacks On Custom Polymer Elements

Share this video with your friends