minimal CE lifecycle

by phloe

HTML

<dr-test></dr-test>

CSS

p {
  margin: 20px;
  color: blue;
}

JavaScript

class DRTest extends HTMLElement {
  constructor() {
    // Always call super first in constructor
    super();
    console.log('Custom constructor executed.', this);
    
    const p = document.createElement('p');
    p.innerText = "hello";
    const div = document.createElement('div');
    const style = document.createElement('style');
    const root = this.querySelector("div");
    
    this.appendChild(style);
    div.appendChild(p);
    this.appendChild(div);
  }

  connectedCallback() {
    console.log('Custom square element added to page.');
  }

  disconnectedCallback() {
    console.log('Custom square element removed from page.');
  }
}

customElements.define('dr-test', DRTest);