title: How to Get the Contents of a Custom Element
body: <p>I'm creating a <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements" rel="noreferrer">custom element</a> that will be able to convert its contents from markdown to HTML. However, I'm not able to get the contents of my custom elements.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;body&gt;
     &lt;template id="mark-down"&gt;
        &lt;div class="markdown"&gt;&lt;/div&gt;
     &lt;/template&gt;
     &lt;!-- Converts markdown to HTML --&gt;
     &lt;script src="https://cdn.jsdelivr.net/gh/showdownjs/showdown/dist/showdown.js"&gt;&lt;/script&gt;
     &lt;script&gt;
        customElements.define('mark-down',
           class extends HTMLElement {
              constructor() {
                 super()
                 let template = document.querySelector('#mark-down').content
                 this.attachShadow({ mode: 'open' }).appendChild(template.cloneNode(true))
              }
              connectedCallback() {
                 console.log(this) // Returns the whole &lt;mark-down&gt; node and its contents
                 console.log(this.innerHTML) // So why does this return a blank string?
                 // This should theoretically work --&gt; let markdown = this.innerHTML
                 let markdown = '## Test'
                 let converter = new showdown.Converter()
                 let html = converter.makeHtml(markdown)
                 this.shadowRoot.innerHTML = html;
              }
           });
     &lt;/script&gt;
  
     &lt;main&gt;
        &lt;mark-down&gt;
  ## Our Markdown
  
  These contents should get converted
  
  * One
  * Two
  * Three
        &lt;/mark-down&gt;
     &lt;/main&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>My issue is in the <code>connectedCallback()</code>. When logging <code>this</code>, I get the whole <code>&lt;mark-down&gt;</code> node with its contents in markdown. However, it doesn't seem to have valid properties. Using <code>innerHTML</code> returns a blank, where it should return the markdown; other combinations, like <code>this.querySelector('mark-down')</code>, return <code>null</code>.</p>
  <p>What can I do to get the contents of my custom element?</p>