How to pass JSON Object string literal into LitElement

Question

I am looking at if the following is viable.

My server side-code serializes data that drives a (Web) component into a JSON object, which is then renderable into the HTML the server generates as a string. I want to pass this stringified JSON object into my LitElement web component and have my LitElement component automatically deserialize the string into a native JavaScript Object.

For example:

HTML from the server will generate:

<my-lit-element myData="{\"hello\": \"world\"}"/>

I want my LitElement (using Typescript) to be able to do something like:

@customElement('my-lit-element')
export class MyLitElement extends LitElement {
    @property({type: String) myData = '{}'

    render() {
        return html`
        <div>${this.myData.hello}</div>
    `;
    }   
}

Is this possible?

To answer the question why I don't just make a LitElement property for each myData key: I have a number of instances where myData's properties may contain lists of other multi-property objects, that I need to somehow pass into the LitElement, so that it can loop over them and render their contents.

The answers I've found here seem to address binding JavaSCript objects within the render method and not passing IN string JS Objects (via HTML) to the LitElement.

Answer 1

LitElement has some default converter built for example for object it uses JSON.parse automatically

See more details at the docs https://lit-element.polymer-project.org/guide/properties#conversion-type

So if you have an html like so

Note: custom elements can not be self closing according to spec

Note: escaping quotes in html is not really a thing - you need to use " instead

<my-lit-element myData="{&quot;hello&quot;: &quot;world&quot;}"></my-lit-element>

then all you need to convert the string to an object is to define it as an object

@customElement('my-lit-element')
export class MyLitElement extends LitElement {
    @property({type: Object) myData = '{}'

    render() {
        console.log(this.myData); // { hello: 'world' } 
        return html`
          <div>${this.myData.hello}</div>
        `;
    }   
}

if more custom conversions are needed you can provide your own converter https://lit-element.polymer-project.org/guide/properties#conversion-converter

Live Demo:

<h1>My Demo</h1>

<my-lit-element myData="{&quot;hello&quot;: &quot;world&quot;}"></my-lit-element>

<script type="module">
import { LitElement, html } from 'https://unpkg.com/lit-element?module';
export class MyLitElement extends LitElement {
  static get properties() {
    return {
      myData: { type: Object }
    };
  }

  constructor() {
    super();
    this.myData = {};
  }

  render() {
    console.log(this.myData); // { hello: 'world' } 
    return html`
      <div>${this.myData.hello}</div>
    `;
  }
}
customElements.define('my-lit-element', MyLitElement);
</script>