title: How do I append a Web Component created programmatically?
body: <p>I created a Web Component class to extend <em>div</em>, and used <code>customElements.define()</code> to define it:</p>
  
  <pre><code>class Resize_Div extends HTMLDivElement {
    constructor(){
        super();
        this.cpos = [0,0];
        &lt;etc.&gt;
    }
    connectedCallback() {
      console.log( 'connected' );
    }
    &lt;etc.&gt;
  }
  
  customElements.define('resize-div', Resize_Div, { extends:'div'} );
  </code></pre>
  
  <p>If I test in html, as <code>&lt;div is:'resize-div'&gt; &lt;/div&gt;</code>, it works fine.</p>
  
  <p>Now I want to use createElement to create an instance programmatically, using the options to declare the <strong><em>is</em></strong>, as documented <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement#Web_component_example" rel="nofollow noreferrer">here</a>:</p>
  
  <pre><code>let dv = document.createElement('ul', { is: 'resize-div' })
  </code></pre>
  
  <p>The browser developer tools show it created, with outerHTML as below:</p>
  
  <pre><code>outerHTML: "&lt;div is="resize-div"&gt;&lt;/div&gt;"
  </code></pre>
  
  <p>As documented, "The new element [has]  an <strong><em>is</em></strong> attribute whose value is the custom element's tag name."</p>
  
  <p>Now I set id, class, and style, and attach the new element to the DOM via:</p>
  
  <pre><code>document.getElementById( parent ).appendChild( dv );
  </code></pre>
  
  <p>Now look at it again: the <strong><em>is</em></strong> attribute is stripped off and it doesn't function as a Web Component:</p>
  
  <pre><code>attributes: NamedNodeMap
  0: id
  1: class
  2: style
  length: 3
  </code></pre>
  
  <p>The docs for the deprecated registerElement <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/registerElement" rel="nofollow noreferrer">here</a> show an example using <code>document.body.appendChild( new myTag() )</code>, but that's obsolete.</p>
  
  <p>So what is the correct way to create a Web Component programmatically and attach it to a document?</p>
  
  <p>(ps. I'm working on Chromium Version 70.0.3538.67 (Official Build) Built on Ubuntu, running on Ubuntu 16.04 (64-bit)</p>