Render Object using lit.html

Scenario :

Inside my webComponent - health-check.js file I have:

  static get properties() {
    return {
      plan:Object,
    };
  }

 <div class="body"><p class="title">${this.plan.title}</p></div>

and
Inside my index.html file I pass json like below:

<health-check plan='{ "title" : "Solution Architecure",
 "status" : "Approved" }'></health-check>

but it doesn't render title inside my health-check component

Problem :

Render Object Value with using lit.html?
Render title inside my health-check component.

Any ideas?

Solution

I think you cannot pass the object from html file because it's just html not lit-element or lit-html and lit-html seems not try to parse value in this case (Update I just found another way to define property see below). But of course you can still pass string and parse it inside element.

In index.html

<health-check planString='{
  "title": "Solution Architecure",
  "status": "Approved"
}'>
</health-check>

In health-check.js

class HealthCheck extends LitElement {
  static get properties () {
    return {
      planString: String
    }
  }

  render () {
    return html`
      <div class='body'>
        <p class='title'>${JSON.parse(this.planString).title}</p>
      </div>
    `
  }
}

But I would recommend to wrap you code in single entrypoint like my-app element

In index.html

<my-app></my-app>

In app.js

class App extends LitElement {
  render () {
    return html`
      <health-check .plan='${{
        title: 'Solution Architecure',
        status: 'Approved'
      }}'>
      </health-check>
    `
  }
}

In health-check.js

class HealthCheck extends LitElement {
  static get properties () {
    return {
      plan: Object
    }
  }

  constructor () {
    super()
    this.plan = {}
  }

  render () {
    return html`
      <div class='body'>
        <p class='title'>${this.plan.title}</p>
      </div>
    `
  }
}

Update

You can define property type to tell lit-element how to serialize and deserialize.

class HealthCheck extends LitElement {
  static get properties () {
    return {
      plan: {
        type: {
          fromAttribute (value) {
            return JSON.parse(value)
          }
        }
      }
    }
  }

  render () {
    return html`
      <div class='body'>
        <p class='title'>${this.plan.title}</p>
      </div>
    `
  }
}

Note: This code written in lit-element 0.6.x and lit-html 0.11.x