aurelia with typescript - property 'style' does not exist on type 'Element'

Question

hi i have some issues related to aurelia. im quite a beginner,so im sorry if its trivial.

i can't figure out why i cant have access to 'style' property of 'Element' object. That is what im doing:

@customAttribute('test-attr')
@autoinject
export class TestAttr {
    private element : Element ; 

    constructor( element : Element) {
        this.element = element ;

    }
    attached() {
        //now i want to get a access to 'style'
        this.element.style.color = 'red'
        //this gives a error - Element declaration doesnt contain 'style' property
    }

}

it turns out 'Element' declaration in TypeScript doesnt contain 'style' property, what obviously its correct But aurelia has its own, extended version of Element and here is the inconsistency.

well i found kind of workaround. I manually inject Element, then declare it as HTMLElement in the class. So it goes like this:

@customAttribute('test-attr')
@inject(Element)
export class TestAttr {
    private element : HTMLElement ; 

    constructor( element : HTMLElement) {
        this.element = element ;

    }
    attached() {
        this.element.style.color = 'red'
        //above works fine
    }
}

But obviously i would like to use '@autoinject' because its easy and looks more elegant. Is it something wrong what im doing with autoinject? Or maybe its a bug?

Answer 1

Aurelia automatically registers the DOM element associated with the component in the container with the key Element which is the base type for HTMLElement, SVGElement, etc. This enables you to @inject(Element) (or @autoinject).

There's nothing registered automatically with the key HTMLElement, which is causing the autoinject to fail. I can't think of anything to solve this that is more elegant than what you've already done with the inject decorator.