Show combined element attributes & properties

[samuelli]

Currently only properties are shown. This is fine for Polymer use cases, where all attributes are propagated as properties. However, analyzer supports vanilla custom elements, for which attributes are properties are distinct.

Attributes are picked up by analyzer. Sample source of observedAttributes.
https://github.com/samuelli/progress-bar/blob/ab8acaa186da2377a20b3e5f6f3b0501a8921dcc/progress-bar.html#L90
But iron-doc-element does not display the attribute: https://www.webcomponents.org/element/samuelli/progress-bar/v2.0.0

I propose that we show a list as follows:

---

Attributes & properties

attribute-property (HTML attribute) This is an attribute which is also a property
attributeProperty (JS property)

my-attribute (HTML attribute) This is just an attribute not found in properties

myProperty (JS property) This is just a property not found in attributes

---

The "HTML attribute" and "JS property" could just be shortened to "HTML" and "JS" and could be displayed as little tags like MDN does.

We have seen related requests to show separate attribute/property annotations:

• can we display the properties as attributes? #82
• attributes vs. properties iron-component-page#32
• Suggestion: Example at each API Reference, for quick copy/paste webcomponents/webcomponents.org#890
• Properties should be also listed in "allow-outside-scroll" format webcomponents/webcomponents.org#965

Another related issue previously was annotations were too subtle & we could utilise the same tag concept:
webcomponents/webcomponents.org#796

[samuelli]

New related user report: webcomponents/webcomponents.org#965

[arthurevans]

Would love to see HTML attr. names for props that have associated attributes. That's often a source of confusion. And there are some Polymer elements that use vanilla attributes. +100!