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.

If you just try to use JSON.stringify in IE and Edge browser then does it work on your side? If it work then issue may be related with child or parent comp. I suggest you to provide a sample code which we can try to run with Edge and IE browser to check the result. It can help to understand the issue properly. — Deepak-MSFT, Dec 24 '19 at 08:25
@Deepak-MSFT Found solution for edge. If I use .myJsonData=${JSON.stringify({ code: '123',name: 'xyz'})} then It is working fine.. by prepanding dot with property — Tech Geek, Dec 24 '19 at 12:10
Thanks for sharing the solution for the issue. I suggest you post your solution as an answer for this thread and try to mark your own answer as an accepted answer for this question after 48 hrs when it is available to mark. It can help other community members in the future in similar kinds of issues. Thanks for your understanding — Deepak-MSFT, Dec 24 '19 at 12:55
https://stackoverflow.com/questions/54245124/lit-element-passing-data-from-one-component-to-another I have got solution from this thread — Tech Geek, Dec 26 '19 at 08:54

score 0 · Accepted Answer · answered May 04 '21 at 18:43

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.

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

1 Answers1