Litelement Pass an object as an html attribute

user_10471519 0
Viewed 3857

I created a simple element using Litelement that has two properties, use field and value of the string and Array type respectively. When I pass the value as the HTML attribute as seen below, the expected action occurs and the value is displayed(seen in the image below).

<my-el value='[{"use": "official","system": "urn:lumiradx:consult"}]' ></my-el>

import {LitElement, html} from 'lit-element';
import '@material/mwc-select';
import '@material/mwc-list/mwc-list-item';

class MyEl extends LitElement {
    static get properties() {
        return {
            useField: {type: String},
            value: {type: Array}
        }
    }
   
    constructor() {
        super();
        this.useField = 'true';
        this.value = [{}];
    }

    render() {
      
        if (typeof(this.value) == "string") {
            this.value = JSON.parse(this.value);
        }
        
        return html`${this.value.map((i, index) => html`
        <div id="div">
        ${this.useField !== 'false' ? html`
        <mwc-select class="useField" value="${i.use}" @change="${e => this.value[index].use = e.target.value}">
        <mwc-list-item value="usual">Usual</mwc-list-item>
        <mwc-list-item value="official">Official</mwc-list-item>
        <mwc-list-item value="temp">Temporary</mwc-list-item>
        <mwc-list-item value="secondary">Secondary</mwc-list-item>
        </mwc-select>` : ''}
        </div>
     `)}`;
    }
}

window.customElements.define('my-el',MyEl);

enter image description here

A problem arises when I use this element as an import in another element. In the new element, the value of the first element is passed as an object in the second as seen below. How can I read an object as an attribute?

<el-two value='{"identifier":[{"use": "official","system": "urn:lumiradx:consult"}]}'></el-two>

import {LitElement, html} from 'lit-element';
import 'my-el/myel.js';


class ElTwo extends LitElement {

    static get properties(){
        return {
           locationId: {type: String},
            value: {type: Array}

        }
    }
    /**default value of properties set in constructor*/
    constructor() {
        super();
        this.locationId = 'true';
        this.value = [{}];
    }

     render() {
        if (typeof(this.value) == "string") {
            this.value = JSON.parse(this.value);
        }
        return html`
       ${this.locationId !== 'false' ? html`<my-el value="${this.value.identifier}" id="locationId"></my-el>` : ''}
  `;
    }
}
window.customElements.define('el-two', ElTwo);
lit-html lit-element web-component javascript
1 Answers

You have bad the Type in static get properties()

static get properties(){
   return {
        locationId: {type: String},
        // this is `OBJECT`
        value: {type: Object}
    }
}

On HTML

<el-two value='{"identifier":[{"use": "official","system": "urn:lumiradx:consult"}]}' ></el-two>

On Lit-Element

The solution is simple, use the brackets and . in prop

Ref. https://lit-element.polymer-project.org/guide/properties

On Javascript

let example1 = html` <el-two .value=${{ identifier: [{ use: 'official', system: 'urn:lumiradx:consult' }] }}> </el-two> `;

let info = { identifier: [{ use: 'official', system: 'urn:lumiradx:consult' }] };
let example2 = html` <el-two .value=${info}></el-two> `;

el-two.js

import { LitElement, html } from 'lit-element';
import 'my-el/myel.js';

class ElTwo extends LitElement {
    static get properties() {
        return {
            locationId: { type: String },
            // this is OBJECT
            value: { type: Object }
        };
    }
    
    constructor() {
        super();
        this.locationId = 'true';
        this.value = [{}];
    }

    render() {
        // -> You don't need to do this anymore
        // if (typeof(this.value) == "string") {
        //    this.value = JSON.parse(this.value);
        //}
        return html` ${this.locationId !== 'false' ? html`<my-el value="${this.value.identifier}" id="locationId"></my-el>` : ''} `;
    }
}
window.customElements.define('el-two', ElTwo);

Testing: codesanbox.io

user_41685120
Related