title: Web Components, pass data to and from
body: <p>My understanding is that data is passed to a custom html element via its attributes and sent out by dispatching a CustomEvent. </p>
  
  <p>JavaScript objects can obviously be sent out in the event's <em>detail</em> field, but what if the element needs a lot of data passed into it. Is there a way to provide it with an object in JavaScript. </p>
  
  <p>What if the element for instance contains a variable number of parts that needs to be initialized or changed dynamically (e.g. a table with a variable number of rows)? I can imagine setting and modifying an attribute consisting of a JSON string that is parsed inside the component, but it does not feel like an elegant way to proceed:</p>
  
  <pre><code>&lt;my-element tableRowProperties="[{p1:'v1', p2:'v2'}, {p1:'v1',p2:'v2'}, {p1:'v1',p2:'v2'}]"&gt;&lt;/my-element&gt;
  </code></pre>
  
  <p>Or can you make the element listen to events from the outside that contains a payload of data?</p>