'why does tsc dump the "extends ..." part of the following Typescript class when compiling to JavaScript?

why does tsc dump the "implements ..." part of the following Typescript class when compiling to JavaScript ?

tsc version: Version 4.6.2 / Node version: v17.4.0

compilation command:

tsc -t es6 test.ts

// test.ts

class MyElement extends HTMLElement implements HTMLDivElement {
    align: string;
    constructor() {
        super();
        this.align = "center";
    }
    public connectedCallback(): void {
        this.style.backgroundColor = "red";
        this.style.width = "100px";
        this.style.height = "100px";
    }
}

window.customElements.define('my-element', MyElement);

const myElement = document.createElement("my-element");
const Content = document.createTextNode("My text!");
myElement.appendChild(Content);
// connectedCallback is called when appended to another element
document.body.appendChild(myElement);

// test.js

class MyElement extends HTMLElement {
    constructor() {
        super();
        this.align = "center";
    }
    connectedCallback() {
        this.style.backgroundColor = "red";
        this.style.width = "200px";
        this.style.height = "100px";
    }
}
window.customElements.define('my-element', MyElement);
const myElement = document.createElement("my-element");
const Content = document.createTextNode("my text!");
myElement.appendChild(Content);
// connectedCallback is called when appended to another element
document.body.appendChild(myElement);



Solution 1:[1]

Apparently the workaround is as follows:


class MyElement extends HTMLDivElement {
    constructor() {
        super();
        this.style.width = "100px";
        this.style.height = "500px";
        this.style.backgroundColor = "red";
    }
}

customElements.define('my-element', MyElement, {extends: 'div'});

const myElement = new MyElement();

const Content = document.createTextNode("my text!");
myElement.appendChild(Content);

// connectedCallback is called when appended to another element
document.body.appendChild(myElement);

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Serge Hulne