The connected callback does not trigger when custom HTML elements are being created

Question

The connected callback does not trigger when custom HTML elements are being created

Attempting to craft a custom HTML tag using JavaScript, I aimed to create the custom element with ES6 JavaScript syntax. The code devised for this task reads as follows:

customElements.define('neo-element', NeoElement);
function NeoElement (){
    var ref =  Reflect.construct(HTMLElement,[], this.constructor) ;
    return ref;
};
NeoElement.prototype = Object.create(HTMLElement.prototype);
NeoElement.prototype.constructor = NeoElement;
NeoElement.prototype.connectedCallback = function(){
    this.innerHTML = `<h1>Hello world</h1>`;

<neo-element></neo-element>

While it has been confirmed that NeoElement successfully extends HTMLElement, content is not appearing inside the <neo-element> tags.

If anyone could review the code and advise on any missed elements in ES5 syntax, it would be greatly appreciated.

javascript html css ecmascript-6 ecmascript-5

Answer 1

Answer №1

The issue arises because you are invoking customElements.define—effectively upgrading your <neo-element> to an instance of NeoElement—prior to defining NeoElement.prototype, NeoElement.prototype.constructor, and

NeoElement.prototype.connectedCallback

.

To resolve this, simply reposition the customElements.define call at the end:

function NeoElement() {
    var ref = Reflect.construct(HTMLElement,[], this.constructor) ;
    return ref;
};
NeoElement.prototype = Object.create(HTMLElement.prototype);
NeoElement.prototype.constructor = NeoElement;
NeoElement.prototype.connectedCallback = function(){
    this.innerHTML = `<h1>Hello world</h1>`;
};
customElements.define('neo-element', NeoElement);

<neo-element></neo-element>

Answer 2

The issue arises because you are invoking customElements.define—effectively upgrading your <neo-element> to an instance of NeoElement—prior to defining NeoElement.prototype, NeoElement.prototype.constructor, and

NeoElement.prototype.connectedCallback

.

To resolve this, simply reposition the customElements.define call at the end:

function NeoElement() {
    var ref = Reflect.construct(HTMLElement,[], this.constructor) ;
    return ref;
};
NeoElement.prototype = Object.create(HTMLElement.prototype);
NeoElement.prototype.constructor = NeoElement;
NeoElement.prototype.connectedCallback = function(){
    this.innerHTML = `<h1>Hello world</h1>`;
};
customElements.define('neo-element', NeoElement);

<neo-element></neo-element>

The connected callback does not trigger when custom HTML elements are being created

Answer №1

Similar questions

JavaScript code failing to return array contents

Alert: The index named "namaunit" is not defined

Tips for designing a tilted CSS layout from scratch

"Utilizing the power of ng-click to target specific child

What is the best approach to transfer information from the client side to a node

What is the best way to ensure a container adjusts perfectly to its contents without constraining the contents to their minimum width?

Ways to identify when a chemical reaction has taken place?

Update a table in Laravel view using AJAX with a table join operation

Error message in Material-UI TextField not displaying when state is updated using Object.assign technique

Creating a visually appealing layout by dividing HTML content into two columns within a WebView

Ways to show text in a password field

When you hover over an image, both the image's opacity and the color of the title beneath it change. However, if the title expands to two lines, it messes up

JavaScript button mouse enter

Injecting universal data into ValidationErrors in Angular

Exploring the differences between Material-UI's makeStyles and withStyles when it comes to

The issue of Ejs partial header and footer file only functioning in one file and not the other (both at the same directory level)

I am trying to locate the source of the unexpected token error

Is it the browser's responsibility to convert ES6 to ES5 internally?

Having trouble with implementing a lightbox form data onto an HTML page using the load() function? Let me help

Issue with Material UI dropdown not selecting value on Enter key press