Attribute vs Property

66 views

Skip to first unread message

Vishal Kumar Gupta

unread,

Aug 5, 2014, 3:42:53 AM8/5/14

to polym...@googlegroups.com

Hi Team,

I am bit confused about polymer element attributes and property.

Can someone explain me why i am getting following output for the HTML

Output:-

Test = null, test = t1

Test = null, test = t2

HTML:-

<!doctype>

<html>

<head>

</head>

<polymer-element name="test-element" attributes="Test test">

<paper-item label="Test = {{Test}}, test = {{test}}"></paper-item>

</template>

Polymer("test-element", {});

</script>

</polymer-element>

<test-element Test="t1" test="t2"></test-element>

<test-element test="t2" Test="t1"></test-element>

</body>

</html>

Regards,

vishal

Michael Bleigh

unread,

Aug 5, 2014, 4:21:10 AM8/5/14

to polym...@googlegroups.com

I believe this is the kind of general question that the Polymer team prefers be on StackOverflow (for future reference), but I shall endeavor to answer it.

In a nutshell: HTML attributes are case insensitive. I believe the specific behavior differs a bit from browser to browser, but in Chrome at least if you attempt to access an attribute (such as via node.attributes[0]) it will automatically convert the attribute to downcase.

Since there can only be one of a given attribute value assigned to a node, what's happening is simply that the Test attribute ceases to exist because it is overridden by the (preferred) lowercase form. When you're declaring the element, the first value assigned to the (case-insensitive) test attribute is what seems to be captured, the other ignored.

Basically you can't count on reliable behavior if you double-define an attribute, the same way that bad things happen if you declare two elements with the same ID.

Reply all

Reply to author

Forward

0 new messages