맞춤 요소 및 클래스 데코레이터

Question

맞춤 요소는 클래스 데코레이터에서 다르게 작동합니까?

예 :

된 index.html => test2.js

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

test2.ts (대상 : 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

신용은 해결책을 찾기 위해 https://github.com/rictic에게 가서, 그가 스택에 답할 시간이 있는지 물었지만 그가 계정이 있다고 생각하지 않아서 대신 붙여 넣습니다.

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; 
    } 
}