title: Expand object literal as html5 data- attributes
body: <p>It is possible to expands an object literal as html5 data- attributes?</p>
  
  <p>Having the following object:</p>
  
  <pre><code>const requirements = {
      'data-description': 'some text...',
      'data-pointer': true,
      'data-speaker': true
  }
  </code></pre>
  
  <p>I would like to expand it in a anchor tag in order to get something like this:</p>
  
  <pre><code>&lt;a href="#" class="show-modal" data-description="some-text" data-pointer="true" data-speaker="true"&gt;Show modal&lt;/a&gt;
  </code></pre>
  
  <p>I tried to use the spread syntax in this way <code>&lt;a href="#" class="show-modal" `${...requirements}`&gt;Show modal&lt;/a&gt;</code> But nothing get printed</p>
  
  <p>I am now depending on this function that builds an anchor and passes the data dynamically.</p>
  
  <pre><code>function buildAnchor(requirements) {
      const anchor = document.createElement('a');
  
      anchor.setAttribute('class', 'show-modal');
      anchor.setAttribute('href', '#');
      anchor.textContent = 'More info';
  
      Object.keys(requirements).forEach(data =&gt; {
          anchor.setAttribute(data, requirements[data]);
      });
  
      return anchor.outerHTML;
  }
  </code></pre>
  
  <p>This function do the job, but i would like to know if it's possible to use spread syntax</p>
  
  <p>Thanks in advance</p>