title: Spoiler tag with details+summary
body: <p>I want to create a custom element in HTML with javascript. It's a <code>spoiler</code> tag, and uses <code>details</code> and <code>summary</code>.</p>
  <p>I want to be able to do this:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;spoiler summary=&quot;Spoiler&quot;&gt;
  Spoiler text
  &lt;/spoiler&gt;
  </code></pre>
  <p>which would expand to this:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;details&gt;&lt;summary&gt;Spoiler&lt;/summary&gt;
  Spoiler text
  &lt;/details&gt;
  </code></pre>
  <p>I've tried this:</p>
  <pre class="lang-js prettyprint-override"><code>function create_tag(tagName, fn) {
    document.getElementsByTagName(tagName).map(fn);
  }
  
  function spoiler(elem) {
    if (elem.attributes.summary) {
      elem.innerHTML =
        &quot;&lt;details&gt;&lt;summary&gt;&quot; +
        elem.attributes.summary +
        &quot;&lt;/summary&gt;&quot; +
        elem.innerHTML +
        &quot;&lt;/details&gt;&quot;;
    }
  }
  
  create_tag(&quot;spoiler&quot;, spoiler);
  </code></pre>
  <p>But it does nothing.</p>