// in JS
class MyCustomTag extends HTMLElement {

    constructor() {
        // If you define a constructor, always call super() first!
        super();
    }

    // Return array of strings where each string is the name of the attribute to observe.
    static get observedAttributes() {...}

    //Fired every time the component is added anywhere in the DOM.
    connectedCallback() {...}

    //Fired every time the component is removed from the DOM.
    disconnectedCallback() {...}

    //Called when an observed attribute has been added, removed, updated.
    attributeChangedCallback(name, oldValue, newValue) {...}
}

(function () {
    class MyCustomTag extends HTMLElement {

        constructor() {
            super(); // always call super() first in the constructor.

            this._total = 0;
            this._time = new Date();
            this.attachShadow({mode: 'open'});
            this.render();
        }

        static get observedAttributes() {

            return ['increment'];
        }

        get increment() {
            return this.getAttribute('increment');
        }

        set increment(increment) {
            this.setAttribute("increment", increment);
            this.render();
        }

        get time() {
            return this._time;
        }

        set time(time) {
            this._time = time;
            this.render(); // Each render is replacing the innerHTML, better get hold of individual DOM node that needs repaint ?
            this.addEventListener(); // because whole innerHTML is replaced, eventlisteners added to any node are also gone.
        }

        incrementBy(increment) {
            this._total += Number(increment);
            this.render(); // Each render is replacing the innerHTML, better get hold of individual DOM node that needs repaint ?
            this.addEventListener(); // because whole innerHTML is replaced, eventlisteners added to any node are also gone.
        }

        connectedCallback() {
            this.addEventListener();
        }

        addEventListener() {
            this.addButton = this.shadowRoot.getElementById('add');
            this.addButton.addEventListener('click', (e) => this.doAddAction(e));
        }

        // Only if the attribute that changed is currently being observed.
        attributeChangedCallback(attrName, oldVal, newVal) {
            console.log('attributeChangedCallback called for', {attrName, oldVal, newVal});
            this.render();
        }

        // If for example we delete the node or a parent node in the DOM tree, this function will fire since inherently it will remove the element from the DOM.

        disconnectedCallback() {
            console.log('disconnectedCallback called');
        }

        doAddAction(e) {
            const event = new CustomEvent("doAdd", {...e, detail: {increment: this.increment}});

            this.dispatchEvent(event);
        }

        render() {
            this.shadowRoot.innerHTML = `<style>
    .wrapper {
        text-align: center;
        background: orange;
        display: block;
        border: 5px red double;
    }

    p {
        font-size: 20px;
    }

    h1 {
        font-size: 35px;
        color: red;
    }

</style>

<div class="wrapper">

   <h2>Custom Element</h2>
  <p>I Increment by : <span>${this.increment}</span></p>
  <button id="add">Click Me</button>
  <h1>${this._total}</h1>
  
  <h3>Time is ${this._time.getHours()}:${this._time.getMinutes()}:${this._time.getSeconds()}</h3>
</div>

`
        }
    }

    if (!window.customElements.get('my-custom-tag')) {
        window.customElements.define('my-custom-tag', MyCustomTag);
    }
)();

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnChanges, OnDestroy {

    @Input() increment: number = 1;

    @Input() time: Date = new Date();

    @Output() doAdd = new EventEmitter<number>();

    constructor() {}
    ngOnInit(): void {}
    ngOnChanges(changes: SimpleChanges): void {}
    ngOnDestroy(): void {}
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.ShadowDom
})
export class AppComponent implements OnInit, OnChanges, OnDestroy {

    @Input() increment: number = 1;
    @Input() time: Date = new Date();
    @Output() doAdd = new EventEmitter<number>();

    constructor() {}
    ngOnInit(): void {}
    ngOnChanges(changes: SimpleChanges): void {}
    ngOnDestroy(): void {}
}

@NgModule({
    declarations: [AppComponent],

    imports: [BrowserModule],

    // bootstrap: [AppComponent],

    entryComponents: [AppComponent]

})
export class AppModule {

}

import {createCustomElement} from "@angular/elements";
...

@NgModule({...})
export class AppModule implements DoBootstrap {

    constructor(private  injector: Injector) {}

    ngDoBootstrap() {

            const ngElement = createCustomElement(AppComponent, {injector: this.injector});

            customElements.define('ng-element', ngElement);
    }
}

import { Component, Input, Output, renderComponent } from '@angular/core';

@Component({
  selector: 'hello-world',
  template: `...`
})
class HelloWorld {
  @Input() name: string;
  @Output() nameChange = new EventEmitter();
  changeName = () => this.nameChange.emit(this.name);
}

renderComponent(HelloWorld);

import { withNgComponent } from '@angular/elements';
import { HelloWorld } from './hello-world.component';

// create a Custom Element that wraps the Angular Component
const HelloWorldElement = withNgComponent(HelloWorld);

// register it
customElements.define('hello-world', HelloWorldElement);

import { NgElement, withElement } from '@angular/elements';
...
@NgElement({
  selector: 'hello-world',
  template: `...`,
  providers: [SomeService],
  deps: [SomeDirective, SomePipe]
})
class HelloWorld extends withNgElement {}