CODEWITHSUNDEEP
polymerweb-component
Gilberg
Gilberg

Reputation: 2564

Polymer get an attribute from an element

I am using neon-animation-pages and I want to see if an attribute is set on one of its child elements. From what I understand you can just add any attribute you want and if it is in the tag it will resolve to true if it doesn't have a value explicity set. For instance:

<neon-animation-pages id="pages">
    <div awesome>This one is awesome</div>
    <div>This one is not</div>
    <div>This one is not</div>
</neon-animation-pages>

Above I created my own attribute called: awesome

In my code I use this:

_onIronSelect: function(){
    console.log(this.$.pages.selectedItem.getAttribute('awesome'));
}

The console only spits out 'null' or ' ' depending on whether it has my awesome attribute. I can prob make it work, but I thought it was supposed to resolve to true or false, boolean?

Found this in the docs

Boolean properties are set based on the presence of the attribute: if the attribute exists at all, the property is set to true, regardless of the attribute value. If the attribute is absent, the property gets its default value.

at https://www.polymer-project.org/1.0/docs/devguide/properties.html

So I assume I should be trying to get the value of the selectedItem's property > awesome. How can I do this?

Upvotes: 1

Views: 4753

Answers (2)

DocDude
DocDude

Reputation: 2873

There's an important difference between properties and attributes. Properties are JavaScript properties on the DOM object. Attributes basically provide a string valued key/value database that can be initialized from markup.

The Polymer docs you quoted are talking about properties. If a Polymer element has a property, awesome, listed in the properties object with a type of Boolean, it will deserialize to true or false as described.

This is a service Polymer provides because it's a common pattern for HTML elements. For example, if you set the id attribute on an HTML element, the browser automatically reflects that to the id property. But if you add a generic attribute that that element doesn't know about (like awesome), the attribute isn't reflected as a property.

If you want to test for the presence or absence of an attribute on any element (standard HTML or Polymer), use hasAttribute as @günter-zöchbauer said. According to MDN, getAttribute in all modern browsers returns null when the attribute is absent, but apparently this wasn't always true, so hasAttribute is probably safer, as well as clearer.

https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute

Upvotes: 1

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657058

Maybe you want

this.$.pages.selectedItem.hasAttribute('awesome')

Upvotes: 0

Related Questions