Using CustomElementRegistry.define without Class but with a Constructor Function
up vote
0
down vote
favorite
I'm trying to define custom HTML elements using the define-method of the CustomElementRegistry.
(https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define)
In the example on MDN they use a ES6-Class which they pass into CustomElementRegistry.define as the second argument.
Since ES6-Classes are just syntactic sugar for the Prototype-Pattern I would like to try to define a custom element with a classic Constructor Function using Prototypes directly.
So I created two examples. One is working (class-based) and the other is not working (prototype-based).
This example works:
class MyElement extends HTMLElement {
test() {
console.log('This is a test!');
}
}
customElements.define('my-element', MyElement);
const myElement = new MyElement();
myElement.textContent = 'Hello World!';
document.body.appendChild(myElement);This example doesn't work:
function MyElement() {
}
MyElement.prototype = Object.create(HTMLElement.prototype);
MyElement.prototype.constructor = MyElement;
MyElement.prototype.test = function () {
console.log('This is a test!');
};
customElements.define('my-element', MyElement);
const myElement = new MyElement();
myElement.textContent = 'Hello World!';
document.body.appendChild(myElement);The second example throws the error TypeError: 'set textContent' called on an object that does not implement interface Node..
So it seems that extending HTMLElement is somehow only possible using a Class and a class is not just syntactic sugar.
What is the exact reason that the second example using the classic Prototype inheritance doesn't work? Am I missing a point?
javascript html
asked Nov 18 at 16:52
Teemoh
19219
add a comment |
up vote
0
down vote
favorite
I'm trying to define custom HTML elements using the define-method of the CustomElementRegistry.
(https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define)
In the example on MDN they use a ES6-Class which they pass into CustomElementRegistry.define as the second argument.
Since ES6-Classes are just syntactic sugar for the Prototype-Pattern I would like to try to define a custom element with a classic Constructor Function using Prototypes directly.
So I created two examples. One is working (class-based) and the other is not working (prototype-based).
This example works:
class MyElement extends HTMLElement {
test() {
console.log('This is a test!');
}
}
customElements.define('my-element', MyElement);
const myElement = new MyElement();
myElement.textContent = 'Hello World!';
document.body.appendChild(myElement);This example doesn't work:
function MyElement() {
}
MyElement.prototype = Object.create(HTMLElement.prototype);
MyElement.prototype.constructor = MyElement;
MyElement.prototype.test = function () {
console.log('This is a test!');
};
customElements.define('my-element', MyElement);
const myElement = new MyElement();
myElement.textContent = 'Hello World!';
document.body.appendChild(myElement);The second example throws the error TypeError: 'set textContent' called on an object that does not implement interface Node..
So it seems that extending HTMLElement is somehow only possible using a Class and a class is not just syntactic sugar.
What is the exact reason that the second example using the classic Prototype inheritance doesn't work? Am I missing a point?
javascript html
asked Nov 18 at 16:52
Teemoh
19219
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I'm trying to define custom HTML elements using the define-method of the CustomElementRegistry.
(https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define)
In the example on MDN they use a ES6-Class which they pass into CustomElementRegistry.define as the second argument.
Since ES6-Classes are just syntactic sugar for the Prototype-Pattern I would like to try to define a custom element with a classic Constructor Function using Prototypes directly.
So I created two examples. One is working (class-based) and the other is not working (prototype-based).
This example works:
class MyElement extends HTMLElement {
test() {
console.log('This is a test!');
}
}
customElements.define('my-element', MyElement);
const myElement = new MyElement();
myElement.textContent = 'Hello World!';
document.body.appendChild(myElement);This example doesn't work:
function MyElement() {
}
MyElement.prototype = Object.create(HTMLElement.prototype);
MyElement.prototype.constructor = MyElement;
MyElement.prototype.test = function () {
console.log('This is a test!');
};
customElements.define('my-element', MyElement);
const myElement = new MyElement();
myElement.textContent = 'Hello World!';
document.body.appendChild(myElement);The second example throws the error TypeError: 'set textContent' called on an object that does not implement interface Node..
So it seems that extending HTMLElement is somehow only possible using a Class and a class is not just syntactic sugar.
What is the exact reason that the second example using the classic Prototype inheritance doesn't work? Am I missing a point?
javascript html
asked Nov 18 at 16:52
Teemoh
19219
I'm trying to define custom HTML elements using the define-method of the CustomElementRegistry.
(https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define)
In the example on MDN they use a ES6-Class which they pass into CustomElementRegistry.define as the second argument.
Since ES6-Classes are just syntactic sugar for the Prototype-Pattern I would like to try to define a custom element with a classic Constructor Function using Prototypes directly.
So I created two examples. One is working (class-based) and the other is not working (prototype-based).
This example works:
class MyElement extends HTMLElement {
test() {
console.log('This is a test!');
}
}
customElements.define('my-element', MyElement);
const myElement = new MyElement();
myElement.textContent = 'Hello World!';
document.body.appendChild(myElement);This example doesn't work:
function MyElement() {
}
MyElement.prototype = Object.create(HTMLElement.prototype);
MyElement.prototype.constructor = MyElement;
MyElement.prototype.test = function () {
console.log('This is a test!');
};
customElements.define('my-element', MyElement);
const myElement = new MyElement();
myElement.textContent = 'Hello World!';
document.body.appendChild(myElement);The second example throws the error TypeError: 'set textContent' called on an object that does not implement interface Node..
So it seems that extending HTMLElement is somehow only possible using a Class and a class is not just syntactic sugar.
What is the exact reason that the second example using the classic Prototype inheritance doesn't work? Am I missing a point?
class MyElement extends HTMLElement {
test() {
console.log('This is a test!');
}
}
customElements.define('my-element', MyElement);
const myElement = new MyElement();
myElement.textContent = 'Hello World!';
document.body.appendChild(myElement);class MyElement extends HTMLElement {
test() {
console.log('This is a test!');
}
}
customElements.define('my-element', MyElement);
const myElement = new MyElement();
myElement.textContent = 'Hello World!';
document.body.appendChild(myElement);function MyElement() {
}
MyElement.prototype = Object.create(HTMLElement.prototype);
MyElement.prototype.constructor = MyElement;
MyElement.prototype.test = function () {
console.log('This is a test!');
};
customElements.define('my-element', MyElement);
const myElement = new MyElement();
myElement.textContent = 'Hello World!';
document.body.appendChild(myElement);function MyElement() {
}
MyElement.prototype = Object.create(HTMLElement.prototype);
MyElement.prototype.constructor = MyElement;
MyElement.prototype.test = function () {
console.log('This is a test!');
};
customElements.define('my-element', MyElement);
const myElement = new MyElement();
myElement.textContent = 'Hello World!';
document.body.appendChild(myElement);javascript html
javascript html
asked Nov 18 at 16:52
Teemoh
19219
asked Nov 18 at 16:52
Teemoh
19219
asked Nov 18 at 16:52
Teemoh
19219
asked Nov 18 at 16:52
Teemoh
19219
asked Nov 18 at 16:52
Teemoh
19219
19219
add a comment |
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53363276%2fusing-customelementregistry-define-without-class-but-with-a-constructor-function%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
