title: How to add custom data attributes with Asciidoctor?
body: <p>I want to annotate paragraphs and the resulting HTML to have custom data attributes like this:</p>
  
  <pre><code>&lt;div class="paragraph" data-progress="23"&gt;
  &lt;p&gt;Lorem ipsum dolor sit&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I could extend the class attribute like this:</p>
  
  <pre><code>=== 5
  [.progress=23]
  Lorem ipsum dolor sit
  </code></pre>
  
  <p>But this approach is not for key value pairs. The result would look like this:</p>
  
  <pre><code>&lt;div class="paragraph progress=23"&gt;
  &lt;p&gt;Lorem ipsum dolor sit&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What is the recommended way to annotate or add meta data with Asciidoc or Asciidoctor?</p>