CustomElementPrototype : HTMLElement

The prototype used for a custom element created with customElements.define().

Instance Methods

adoptedCallback(oldDocument : Document, newDocument : Document) : undefined

Called when adopted into a new Document.

Example:

<style>
  my-element {
    border: 1px solid green;
  }
</style>

<my-element>MyElement from HTML</my-element>

<iframe id="frame"></iframe>

<script>
  class MyElement extends HTMLElement {
    adoptedCallback(oldDocument, newDocument) {
      console.log(`adopted from ${oldDocument.documentURI} to ${newDocument.documentURI}`);
    }
  }
  customElements.define('my-element', MyElement);

  // Create an instance via JavaScript
  var myElement = new MyElement();
  myElement.textContent = "MyElement from Code";
  document.body.appendChild(myElement);

  var frameDoc = document.querySelector('#frame').contentDocument;
  frameDoc.body.appendChild(myElement);
</script>

Run

Results:

attributeChangedCallback(name : String, oldValue : Object, newValue : Object, namespace : String) : undefined

Called when an attribute was changed on the element. See also MutationObserver.

Example:

<style>
  my-element { 
    border: 1px solid green;
  }
</style>

<my-element foo="htmlattr">MyElement from HTML</my-element>

<script>
  class MyElement extends HTMLElement {
    static get observedAttributes() { return ['foo']; }

    attributeChangedCallback(name, oldValue, newValue) {
      console.log(`${name} changed from "${oldValue}" to "${newValue}"`);
    }
  }
  customElements.define('my-element', MyElement);

  // Create an instance via JavaScript
  var myElement = new MyElement();
  myElement.textContent = "MyElement from Code";
  document.body.appendChild(myElement);

  myElement.setAttribute('foo', 'codeattr');
</script>

Run

Results:

connectedCallback() : undefined

Called when the custom element is inserted into the document or when the prototype is applied to elements already in the tree at the time customElements.define() is called. See also MutationObserver.

Example:

<style>
  my-element { 
    border: 1px solid green;
  }
</style>

<my-element>MyElement from HTML</my-element>

<script>
  class MyElement extends HTMLElement {
    connectedCallback() {
      console.log('element parented to ' + this.parentElement.tagName);
    }
  }
  customElements.define('my-element', MyElement);

  // Create an instance via JavaScript
  var myElement = new MyElement();
  myElement.textContent = "MyElement from Code";
  document.body.appendChild(myElement);
</script>

Run

Results:

disconnectedCallback() : undefined

Called when the element is removed from the document. See also MutationObserver.

Example:

<style>
  my-element { 
    border: 1px solid green;
  }
</style>

<my-element>MyElement from HTML</my-element>

<script>
  class MyElement extends HTMLElement {
    disconnectedCallback() {
      console.log('element disconnected');
    }
  }
  customElements.define('my-element', MyElement);

  document.body.removeChild(document.querySelector('my-element'));
</script>

Run

Results:

Details

The following example demonstrates how to create a custom element based on HTMLElement.

Example:

<style>
  my-element { 
    border: 1px solid green;
  }
</style>

<my-element>MyElement from HTML</my-element>

<script>
  class MyElement extends HTMLElement {
    constructor() {
      super();

      // Hook up click listener to set the color to red
      this.addEventListener('click', function(event) {
        event.target.style.color = 'red';
      });
    }
  }
  customElements.define('my-element', MyElement);

  // Create an instance via JavaScript
  var myElement = new MyElement();
  myElement.textContent = "MyElement from Code";
  document.body.appendChild(myElement);
</script>

Run

Results:

home license contribute feedback toggle light/dark mode