I've been having some trouble trying to override a predefined property in lit-element. Using Typescript, I set the value of the property using a decorator in the custom element, but when I attempt to override it by setting a different attribute in the index.html file, the change doesn't seem to take effect...
Upon inspecting the attribute through console.log, it appears that only the initial attribute from the lit-element is being retained.
In my setup, I am utilizing mixinBehaviours along with IronA11yKeysBehavior and GestureEventListeners in conjunction with LitElement.
Although the property does successfully overwrite when employing the standard JavaScript notation, I'd prefer to stick with decorators if feasible.
// TypeScript file
class Carousel extends mixinBehaviors([
IronA11yKeysBehavior,
GestureEventListeners
], LitElement) {
/**
* Carousel direction (horizontal or vertical)
*/
@property({type: String})
direction = 'horizontal';
}
// index.html
<carousel direction="vertical"></carousel>
I'm really hoping that the direction specified in index.html can properly override the typescript-defined decorator property...