Passing objects or lists from plain HTML

[modmoto]

I am starting out with lit and have issues passing objects or lists to attributes. From reading the docs I have to put a . before the property when I want to pass objects inside a lit element or leave that out when I want to do the same from plain HTML. I can pass objects or arrays but as soon as I add properties to the passed objects, the object or array is undefined in the lit component.

this here passes two undefined objects to option or test

<my-dropdown options="[{ text: 'hello' }, { text: 'hello' }]" test="{ text: 'hello'}"></my-dropdown

while this here works and passes an array of two objects to options and an empty object to test

<my-dropdown options="[{  }, {  }]" test="{  }"></my-dropdown

My component is pretty simple like so:

import { html, LitElement } from 'lit'

export default class MyDropdown extends LitElement {
    static properties = {
        options: { type: Object },
        test: { type: Object },
    }

    constructor() {
        super()
    }

    createRenderRoot() {
        return this
    }

    render() {
        return html`
            <h1>${this.test.text}</h1>
            ${this.options.map((option) =>
            {
                return html`
                    <div>${option.text}</div>
                        `
            })}
        `
    }
}

What am I missing here? Or do I have to pass the objects/arrays in a different manner if I come from plain html?

[modmoto]

I just found this hint in the docs:

Object, Array => If the element has the corresponding attribute, set the property value to JSON.parse(attributeValue).

So, changing the code to this, now finally passes objects.

<my-dropdown options='[{ "text": "hello" }, { "text": "hello" }]' test='{ "text": "hello"}'></my-dropdown

Now that I see it, it does make sense, as attributes can only contain text and putting a valid json string in there will parse the values the right way.

Here is the docs in question:
https://lit.dev/docs/components/properties/#conversion-type