Extending native HTML element in Angular 18

I created a node package for a Custom Element that I want to use in Angular and React. Therefor, in this library, I do not want specific Angular of React code.

My custom element is extending a button:

customElements.define('fancy-button', FancyButton, {extends: 'button'});


And this is how I use it:

<button is="fancy-button">Click me</button>


This all works fine.

Until I try to use my custom element in a Angular component, then it suddenly behaves as a regular button. This answer is using a wrapper div, but I don't want that. Like the answer says: somehow (probably) Angular is first creating the button element, and afterwards is adding the is="fancy-button", which doesn't upgrade the button element to my FancyButton.

I want users of the library able to use the button in their html (<button is="fancy-button">Click me</button>), not force them to use javascript to generate this button.

The answer was in times of Angular 6, maybe there is a solution by now?

Continue reading...