title: How to pass JSON Object string literal into LitElement
body: <p>I am looking at if the following is viable.</p>
  
  <p>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 <em>stringified</em> JSON object into my <code>LitElement</code> web component and have my <code>LitElement</code> component automatically deserialize the string into a native JavaScript Object.</p>
  
  <p>For example:</p>
  
  <p>HTML from the server will generate:</p>
  
  <pre><code>&lt;my-lit-element myData="{\"hello\": \"world\"}"/&gt;
  </code></pre>
  
  <p>I want my <code>LitElement</code> (using Typescript) to be able to do something like:</p>
  
  <pre class="lang-js prettyprint-override"><code>@customElement('my-lit-element')
  export class MyLitElement extends LitElement {
      @property({type: String) myData = '{}'
  
      render() {
          return html`
          &lt;div&gt;${this.myData.hello}&lt;/div&gt;
      `;
      }   
  }
  </code></pre>
  
  <p>Is this possible? </p>
  
  <p>To answer the question why I don't just make a <code>LitElement</code> 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 <code>LitElement</code>, so that it can loop over them and render their contents.</p>
  
  <p>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 <code>LitElement</code>.</p>