For performance reasons, lit-element does not support deserializing object and array properties via attributes in markup.

Here's how we recommend you initialize array and object properties:

Set object properties directly instead of passing them via attributes

Instead of passing stringified object and array properties via attributes in markup, set object and array properties directly:

main-app.js

_render({}){
  return html`
    <student-rec></student-rec>
  `;
}
_firstRendered(){
  const studentRec = this.shadowDom.querySelector('student-rec');
  studentRec.student={
    id: '12345',
    name: 'Yasmeen'
  };
}

student-rec.js

properties(){
  return { 
    student: Object
  }
}
constructor(){
  super();
  this.student = {};
}
_render({student}){
  return html`
    <div>
      ${student.id}<br/>
      ${student.name}<br/>
    </div>
  `;
}

Use the html helper function with JavaScript expressions to initialize object properties

You can import and use the html helper function to initialize array and object properties. For example:

main-app.js

_getStudent(){
  return {
    id: '12345',
    name: 'Yasmeen'
  };
}
_render({}){
  return html`
    <student-rec student="${getStudent()}"></student-rec>
  `;
}

student-rec.js

properties(){
  return { 
    student: Object
  }
}
constructor(){
  super();
  this.student = {};
}
_render({student}){
  return html`
    <div>
      ${student.id}<br/>
      ${student.name}<br/>
    </div>
  `;
}

Implement _deserializeValue

If you need to deserialize properties from a string, implement the _deserializeValue method.