How to pass Objects as properties

I am following a controller as attribute pattern (coming from Angular world):

const DEFAULT_TEXT = 'This is the default Text';
export class ButtonController {
    constructor(public text, 
                public color, 
                public onClick: () => void) {
        
    }
    public reset() {
        this.text = DEFAULT_TEXT;
    }
}

export class ButtonComponent extends LitElement {
    static get properties() {
        return {
            ctrl: ButtonController
        };
    }
}
customElements.define('bk-button', ButtonComponent);

Any ideas on how can I pass an instance of ButtonController to <bk-button ctrl=btnCtrl></bk-button>.

[thepassle]

You should pass it down as a property like so:

<list-items .todoList=${this.todoList}></list-items>

You can see a similar example here.

[LarsDenBakker]

@ashubham That’s how attributes work, properties are regular js properties. When using lit-element, saying <foo-element foo=${myObject}> will under the hood do fooElement.foo = myObject in JS.

Saying <foo-element foo$=${myObject}> tells lit to set an attribute instead of a property, making it do fooElement.setAttribute('foo', myObject) under the hood.