Extend Native HTML Elements with Polymer
Polymer allows us to extend a native HTML element's UI or functionality. In this lesson we'll use a button as our custom element basis and add new UI and functionality to it that can be added to any button in our application.
[00:00] In this lesson, we're going to talk about extending native HTML elements using Polymer.
[00:06] To get us started, I'm going to create a button here, and I'm going to give it an inner HTML of "Hello, world." This is going to be our button that we want to extend. Then we're going to have another button here that we're not going to extend, just so that we can see the difference between the two.
[00:21] The way we instantiate this is with an isAttribute. I'm going to set that to my button. We're going to go ahead and HTML import our mybutton.html, and save that. We can see that we have two buttons here, neither of them is doing anything special, they're just standard buttons.
[00:40] We're going to jump over here to our mybutton.html. We're going to set up our myButton element. The way that we get to the inner content or nested children of a element is with this content tag. This is very similar to React's this.props.children or Angular's transclusion or Ember's yield. We're saying at this point just let any nested elements pass on through into out template.
[01:13] Now, at this point, since we have no other HTML around that content tag, we can reference whatever's inside of that content tag using this as our context. Here in our Polymer script, we're going to go ahead and add an attribute called extends. We're going to set that to the element we want to extend. In our case, that's going to be button. We're saying that this element will extend all buttons.
[01:40] We're
[01:40] To illustrate that, we're going to go ahead and say, on the created life cycle method,just going to add a style of color = red. Go ahead and save that, and take a look at it in a browser. We can see that in fact the extended button has a color style of red while the not extended button does not.
[02:03] We're going to add a little functionality here. I'm just going to create a custom method here called clickHandler, going to be a function.
[02:11] All we're going to do is say this.text.content so the inner content of our passed through element. Again, this is going to reference whatever we've passed into the content tag. This.text.content equals this.text.content.split, just split that on nothing. Then we'll reverse that. Then we'll join that back together. That'll cause a reverse of whatever the content is.
[02:40] Up here in our created method or in our created life cycle, we're going to go ahead and add an event listener to let's say on the click of this. Again, this is referencing the button that's passed into our content. We're simply going to call this.clickHandler. Save that.
[02:57] On the right here, now when we click on that, it's going to reverse the inner HTML or the text content of our button. So we have extended that button using Polymer.