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

A guide on adding a hyperlink to a table in Node.js using officegen

Is there a way to retrieve bookmarks (TOC) from a PDF document using technologies such as NodeJS, ReactJS, or PHP?

Issue with drop-down menu functionality on mobile-friendly website

Discovering browser back button press event utilizing Angular

Loading a Vue.js template dynamically post fetching data from Firebase storage

Transferring an array of objects from one array to another with the click of a button

Choose a specific option from the dropdown menu using a URL parameter

retrieve the value obtained from a promise in an outer scope

Issue: angular2-cookies/core.js file could not be found in my Angular2 ASP.NET Core application

Introducing a fresh parameter to initiate and end Server Sent Events

Ways to retrieve a converted document using the Microsoft Graph API

The element is being offset by SVG animation that incorporates transform properties

Problem with Bootstrap 3 navbar on mobile devices - not tappable or responsive

What is the process of generating a popup panel without relying on libraries, using JavaScript and CSS?

Arrangement of watch attachment and $timeout binding

What methods are available to transfer a variable from one component to another in React?

Eliminate resistance on HTML components

What is the best way to create a summary module that consolidates and re-exports all the exported functionalities from multiple sub-modules in E

The execution of JQuery/Javascript is restricted to only the initial condition within a Visualforce page utilizing the apex:outputpanel tag

Exploring the transition from JavaScript to jQuery