typescript - this.shadowRoot din interiorul unui decorator

Majoritatea handlerelor mele de evenimente din HTMLElementele mele personalizate arată așa,

  totalChanged() {
    if (!this.shadowRoot) return
    const t = this.shadowRoot.querySelector('#total')
    if (t) t.innerHTML = String(this.price * this.quantity)
  }

Este posibil să faci să arate ceva de genul

  @event('#total')
  totalChanged() {
    return String(this.price * this.quantity)
  }

Nu știu cum să ajung la shadowRoot într-un decorator, this se referă la modulul decoratorului în sine, nu la HTMLElement. Și proto este prototipul elementului meu personalizat, de asemenea nu this pe care îl vreau.

export function event(select: string) {
  return (proto: any, propName: string) : any => {
    console.log(this.shadowRoot)
  }
}

Aici this este doar nedefinit

export function event(select: string) {
  return function (proto: any, propName: string) : any {
    console.log(this.shadowRoot)
  }
}

EDITARE: Exemplu

index.html

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

test2.ts => test2.js (țintă 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";
    }
  }
}

function myevent(select: string) {
  return function (this:any, proto: any, propName: string, descriptor: PropertyDescriptor) : any {
    let originalMethod = descriptor.value;
    descriptor.value = function(this:any, ...args: any[]) {
      console.log('test', this)
      return originalMethod.apply(this, args) 
    }
    return descriptor;
  }
}

@defineClass('test-2')
class Greeter2 extends HTMLElement{
  property = 'property2'
  hello = 'hello2'
  constructor() {
    super()
    console.log(this.hello)
  }
  @myevent('hello')
  helloFn() {}
  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)
  }
  @myevent('hello')
  helloFn(){}
}
console.log('test-3: ', new Greeter3());

EDIT2: a fost necesar să apelăm metoda new Greeter3().helloFn() vezi răspunsul lui Diullei

Răspuns #1

Lipsește argumentul descriptor pentru a accesa contextul obiectului. Încearcă acest cod:

export function event(select: string) {
    return function (proto: any, propName: string, descriptor: PropertyDescriptor) : any {
        let originalMethod = descriptor.value; // saving the original function

        descriptor.value = function(...args: any[]) { // changing the original function body
            console.log(this.shadowRoot);
            return originalMethod.apply(this, args); // calling original function
        }
        return descriptor;
    }
}