Ionic v4 using <ion-nav-push> without custom elements

I’m not clear on the concept of html custom elements and the correct usage of <ion-nav-push>.

Why does this work in my page component:

import { HomePage } from '../home/';

export class SomePage {

myHomePage = HomePage;

navPush() {
    const nav = document.querySelector('ion-nav');
    await nav.componentOnReady();


but this does not in the markup?

      // myHomePage is reference to imported HomePage in controller
      <ion-nav-push component="myHomePage">
          <ion-button fill="outline">
            <ion-icon name="add" slot="icon-only"></ion-icon>

why do I have to create a custom element to use <ion-nav-push> in markup?