Not able to pass JSON stringify data to Lit Element child component in IE Edge browser

Question

I am trying to pass my JSON data(JSON stringify data) to child component in Litelement Compoent. It is working in Chrome. But getting undefined in IE Edge browser

  <parent-comp>
    <child-comp myJsonData=`${JSON.stringify({ code: '123',name: 'xyz'})}`>
    </child-comp>
  </parent-comp>

using this myJsonData into updated lifecycle of child-comp. But getting value as undefined in IE Edge.

Answer 1

LitElement can pass values as either an attribute or a property. Use attributes when you want the value to be passed as a string in the HTML, but you're paying an overhead to serialise and parse the result. Use properties when you're passing an object.

This probably isn't working due to issues with JSON.stringify, but even when it does work your output HTML will be:

  <parent-comp>
    <child-comp myJsonData="{ code: '123', name: 'xyz'}">
    </child-comp>
  </parent-comp>

And now child-comp has the job of parsing the string "{ code: '123', name: 'xyz'}" back into an object.

Instead use the property prefix:

const data = { code: '123', name: 'xyz'};
retrun html`
  <parent-comp>
    <child-comp .myJsonData=${data}>
    </child-comp>
  </parent-comp>`

Now there is no stringify/parse work - Lit sets the property directly (something like this.shadowRoot.querySelector('child-comp').myJsonData = data).

If you're using TypeScript decorators you can use @property({attribute: false}) on the property and get warnings or errors when you miss the . prefix.