title: Litelement Pass an object as an html attribute
body: <p>I created a simple element using Litelement that has two properties, use field and value of the string and Array type respectively. When I pass the value as the HTML attribute as seen below, the expected action occurs and the value is displayed(seen in the image below).</p>
  <pre><code>&lt;my-el value='[{&quot;use&quot;: &quot;official&quot;,&quot;system&quot;: &quot;urn:lumiradx:consult&quot;}]' &gt;&lt;/my-el&gt;
  
  import {LitElement, html} from 'lit-element';
  import '@material/mwc-select';
  import '@material/mwc-list/mwc-list-item';
  
  class MyEl extends LitElement {
      static get properties() {
          return {
              useField: {type: String},
              value: {type: Array}
          }
      }
     
      constructor() {
          super();
          this.useField = 'true';
          this.value = [{}];
      }
  
      render() {
        
          if (typeof(this.value) == &quot;string&quot;) {
              this.value = JSON.parse(this.value);
          }
          
          return html`${this.value.map((i, index) =&gt; html`
          &lt;div id=&quot;div&quot;&gt;
          ${this.useField !== 'false' ? html`
          &lt;mwc-select class=&quot;useField&quot; value=&quot;${i.use}&quot; @change=&quot;${e =&gt; this.value[index].use = e.target.value}&quot;&gt;
          &lt;mwc-list-item value=&quot;usual&quot;&gt;Usual&lt;/mwc-list-item&gt;
          &lt;mwc-list-item value=&quot;official&quot;&gt;Official&lt;/mwc-list-item&gt;
          &lt;mwc-list-item value=&quot;temp&quot;&gt;Temporary&lt;/mwc-list-item&gt;
          &lt;mwc-list-item value=&quot;secondary&quot;&gt;Secondary&lt;/mwc-list-item&gt;
          &lt;/mwc-select&gt;` : ''}
          &lt;/div&gt;
       `)}`;
      }
  }
  
  window.customElements.define('my-el',MyEl);
  
  </code></pre>
  <p><a href="https://i.stack.imgur.com/Gqhf7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Gqhf7.png" alt="enter image description here" /></a></p>
  <p>A problem arises when I use this element as an import in another element. In the new element, the value of the first element is passed as an object in the second as seen below. How can I read an object as an attribute?</p>
  <pre><code>&lt;el-two value='{&quot;identifier&quot;:[{&quot;use&quot;: &quot;official&quot;,&quot;system&quot;: &quot;urn:lumiradx:consult&quot;}]}'&gt;&lt;/el-two&gt;
  
  import {LitElement, html} from 'lit-element';
  import 'my-el/myel.js';
  
  
  class ElTwo extends LitElement {
  
      static get properties(){
          return {
             locationId: {type: String},
              value: {type: Array}
  
          }
      }
      /**default value of properties set in constructor*/
      constructor() {
          super();
          this.locationId = 'true';
          this.value = [{}];
      }
  
       render() {
          if (typeof(this.value) == &quot;string&quot;) {
              this.value = JSON.parse(this.value);
          }
          return html`
         ${this.locationId !== 'false' ? html`&lt;my-el value=&quot;${this.value.identifier}&quot; id=&quot;locationId&quot;&gt;&lt;/my-el&gt;` : ''}
    `;
      }
  }
  window.customElements.define('el-two', ElTwo);
  
  </code></pre>