カスタム要素とクラスデコレータ

Question

カスタム要素はクラスデコレータで異なる動作をしますか？

例：

index.htmlを

<test-2></test-2> 
<script src="test2.js"></script> 

test2.ts => test2.js（対象：es2017）

function defineClass(tagname: string) { 
    return function classDecorator<T extends {new(...args:any[]):{}}>(constructor:T) { 
    console.log("Define: " + constructor.name) 
    window.customElements.define(tagname, constructor) 
    return class extends constructor { 
     newProperty = "decorator"; 
     hello = "decorator"; 
    } 
    } 
} 

@defineClass('test-2') 
class Greeter2 extends HTMLElement{ 
    property = 'property2' 
    hello = 'hello2' 
    constructor() { 
    super() 
    console.log(this.hello) 
    } 
    connectedCallback() { } 
    disconnectedCallback() { } 
    attributeChangedCallback(name: string, oldValue: string, newValue: string) { } 
    adoptedCallback() { } 
} 
console.log('test-2: ', document.querySelector('test-2').hello) 

@defineClass('test-3') 
class Greeter3 { 
    property = 'property3' 
    hello = 'hello3' 
    constructor() { 
    console.log(this.hello) 
    } 
} 
console.log('test-3: ', new Greeter3()); 

出力：

Define: Greeter2 
hello2 
test-2: hello2 <= expected "decorator" like Greeter3 does 

Define: Greeter3 
hello3 
test-3: Object {property: "property3", hello: "decorator", newProperty: "decorator"} 

ですこれはそれが働いていると思われる方法ですか？もしそうなら、なぜですか？

Answer 1

クレジットは解決策を見つけるのに行きました、彼はスタックにそれに答える時間があったかと尋ねましたが、彼はアカウントを持っているとは思わないので、代わりに貼り付けます。

function defineClass(tagname: string) { 
    return function classDecorator<T extends {new(...args:any[]):{}}>(constructor:T) { 
    console.log("Define: " + constructor.name) 
    const generated = class extends constructor { 
     newProperty = "decorator"; 
     hello = "decorator"; 
    } 
    window.customElements.define(tagname, generated) 
    return generated; 
    } 
}