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

We can declare properties on our custom element which serve as a public api configurable by any user from markup.

[00:00] In this lesson, we are going to talk about declaring properties from within our Polymer elements. I'm going to go ahead and set up this element that I'm going to call propElement. Into that, I'm going to pass an attribute called name, I'm going to set that to Joe Maddalone. We're going to go ahead and HTML import propElement, save that. Absolutely nothing's going to happen.

[00:23] We need to set up our Polymer element. We're going to call that prop-element. Right here in our template tag, we're going to go ahead and output NH1. We're going to one way data bind that attribute of name. Here in our property instantiation, I'm going to go ahead and save this. We can see that everything's working just fine on the right.

[00:46] I'm going to add a properties key, that's going to be an object. I'm going to have a name value or a name key, and that's going to identify the attribute that we're expecting. I'm going to set that to string right now. This is the simplest way to set a property in our component.

[01:04] If I go ahead and set that to number, you'll see that we are getting not a number because we did not pass a number into that, so I'm going to go and set that back to string. I'm going to create a new property called position. This is going to be more of an annotated property on our component. The way we achieve the same thing is just by saying type instead of that component and adding the type of primitive value that we're expecting. These two are pretty much equal.

[01:30] I'm going to go ahead and set up an H2 here. Again, we'll one way data bind this value of position. Save that and nothing's going to happen. We just get our Joe Maddalone because we haven't passed in a position. If we want to do that, we'll jump back over here, pass in position = instructor. Save that. We can see we have our instructor attribute.

[01:56] Now we can also set a default. I've gotten rid of the instructor or the position value that we previously passed in. I'm going to set a value here of instructor, save that. We can see that now we have a default value for our attribute of position declared here in our properties.

[02:17] If we look at our property or our prop element here in the elements tab, we can see that we've got our name that's being passed in. We hard coded that right into our HTML. However, if we want that new value of position to be available in the DOM for any other JavaScript that might need to reference it, we can simply set reflect to attribute to true, save that. Now we can see that the position attribute has been added to our element, so that's now available to any other JavaScript that may need to interact with that attribute.

[02:55] We can also set this to a read only attribute. If I set that to true, everything is still the same. If I come over here and say that I want my position to be boss man, save that, and you can see that the position attribute is still set to instructor because it's a read only attribute that we can no longer change as the consumer of this element.

[03:25] We can also kill off our default value and implement a computed value by adding the computed key and then passing in a function as a string here. I'm going to say computed position. I'm going to pass into that a known value, which we have called name. We're going to go ahead and create that method here. Computed position is going to be a function, takes in name, and then we just return whatever value we want.

[03:55] I'm going to say if name is equal to Joe Maddalone, then we're going to return the bestest instructor. Otherwise, we'll return instructor. Save that. On the right, we can see that we have in fact receive a value of Joe Maddalone. Therefore, our position has been computed to be the best instructor ever.

Course

Creating Custom Web Elements with Polymer 2

Understand Declared Property Basics in Polymer

Share this video with your friends