@angular/elements uses (internal) property name for custom element properties, but template name for attributes #58302

Angular edit

Angular elements defines (Object.defineProperty) a property for each input of an element's component, as well as an HTML attribute which feeds into each property. Each input is thus represented by a property/attribute pair, as in the real DOM.

However, the way we name these things differs. createCustomElement uses the template name of the input for the attribute API, but the property name of the input for the DOM/property API. This was likely done intentionally as it makes some sense - property name for properties - but it doesn't consider that the property name is meant to be an implementation detail of a component and shouldn't end up on its public API.

Fixing this would be a breaking change.

Original Issue

When declaring an input with alias inside of a component and use createCustomElement of that component.
ex.

readonly name = input<string>(
    'name',
    { alias: 'customName' },
  );

On the actual web-component there are no such attribute as customName, only name will exist and work.

Looks like that ComponentFactory at method resolveComponentFactory which returns inputs array with propName of each input is not actually aliased name.

https://github.com/angular/angular/blob/main/packages/elements/src/component-factory-strategy.ts#L46