Custom Events with Angular Elements

Created component in Angular, it has Output called selectedStep, that emits a number.

@Output() public selectedStep: EventEmitter<number> = new EventEmitter<number>();

How to write CustomEvent in plain HTML + JS page, so that it would eg. display step number to console?

<script>
// trigger this function, when event is emitted from inside custom-element
function stepChanged(e) {
  console.log('Current step: ' + e);
}

document.addEventListener("DOMContentLoaded", function() {
  // Handler when the DOM is fully loaded
  let element = document.querySelector("custom-element");
  element.addEventListener("selectedStep", event => {
    stepChanged(event.detail);
  });
});

</script>
<custom-element></custom-element>

Important to remember: 

1. addEventListener first parameter is the name of Output 
2. Emitted value is in detail property of second paramenter