Components panel has unintuitive display for components that match native HTML elements

[EliHowey]

Angular DevTools version (required): 1.0.0

Angular version (required): 9.0.6

Link to a minimal stackblitz reproduction (strongly encouraged): https://stackblitz.com/edit/angular-devtools-directive-matching

Description of issue:

When a native HTML element matches a @Component selector, the Angular DevTools Components panel lists the component by its native tag name in the component tree, and attributes the component's property values to the native element rather than the matching component class. This can lead to confusion about which component is matching an element, and about where inputs/outputs/properties are coming from.

In the following screenshot, the highlighted node matches an AuthFooterComponent with the selector footer[hamAuthFooter] and a property currentYear. Note how the component is listed as footer in both the component tree and the sidebar. (The link to the component's source code navigates to AuthFooterComponent as expected.)

In the next screenshot, the highlighted link matches both LinkComponent (a[hlLink]) and ExternalLinkDirective (a[target="_blank"]). The element tree only indicates a match for ExternalLinkDirective, and it wouldn't be surprising if someone mistakenly thought that the input and property listed in the sidebar derived from ExternalLinkDirective, when they actually derive from LinkComponent.

Steps to reproduce:

1. Create a component whose selector matches a native HTML element (e.g., a[myComponent]).
2. Observe how Angular DevTools represents that component in the Components panel.

[mgechev]

I'd change this to a feature request rather than an issue. The current behavior is by design, but I agree it could be confusing and we can change it.