Каковы правила соответствия (mapping) между Angular-компонентом и custom element?

Правила отображения

Angular Elements задаёт предсказуемый bridge между API компонента и DOM:

Inputs → properties/attributes

• @Input() name доступен как property name на элементе;
• для attributes часто используется kebab-case: userName ↔ user-name;
• при изменении attribute Angular обновляет input (с оговорками для сложных типов).

Outputs → DOM events

• @Output() saved = new EventEmitter<Payload>() → событие saved на элементе;
• в хосте: el.addEventListener('saved', handler);
• detail события несёт payload (через CustomEvent).

Методы / public API

• публичные методы компонента можно вызывать с экземпляра element после upgrade (осторожно с таймингом connectedCallback).

@Component({
  selector: 'app-rating',
  template: `{{ value }}`,
})
export class RatingComponent {
  @Input() value = 0;
  @Output() rate = new EventEmitter<number>();
}
// <app-rating value="3"></app-rating>
// ratingEl.addEventListener('rate', ...)

Ограничения: объектные inputs через HTML-attributes неудобны (только строки) — лучше property binding из JS/фреймворка-хоста. Булевы attributes работают по HTML-семантике присутствия. Content projection / слоты требуют отдельного дизайна API.

Запомните формулу: inputs = props/attrs, outputs = native events.