Creating subclass of HTMLDivElement

Question

I've tried to create a subclass of HTMLDivElement, but I've got an error: Uncaught TypeError: Illegal constructor

var subC = function() {
    HTMLDivElement.call(this);

    //....
};

subC.prototype = Object.create(HTMLDivElement.prototype);

maybe you are looking for `var elm = document.registerElement('my-awesome-element');`? if so, take a look at http://www.polymer-project.org/ — bbuecherl, Apr 01 '14 at 19:47

score 0 · Answer 1 · answered Apr 01 '14 at 19:41

0

How about

function subC() {
    //w/e
}    
subC.prototype = document.createElement('div');
var x = new subC();
alert(x instanceof HTMLDivElement);

answered Apr 01 '14 at 19:41

Musa

1

you'll have a few problems as soon as you create multiple subC instances, i believe. – mpm Apr 01 '14 at 19:48
@IterAtor you didn't say what you were trying to do with it. – Musa Apr 01 '14 at 20:37

score 0 · Accepted Answer · answered Apr 01 '14 at 19:45

You cant subclass most of the DOM api ,especially things like Node,Element ...

Why? because they involve complex dependency injection,that's why you need to build Element through document.createElement.

The only thing you can do is use composition :

function subC = function(htmlElement){
   this.htmlElement=htmlElement;
}

you can then expose some properties of htmlElement in subC

Object.keys(this.htmlElement).forEach(function(k){this[k]=this.htmlElement[k];},this);

in the constructor,as shortcuts.

You'd need to wrap each method you want to use though,i wouldnt risk adding Element.prototype methods to subC and expect them to behave correctly.

Some years have passed since this answer and I guess that with the introduction of [custom html elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#customized_built-in_elements) one should be able to subclass quite a lot of the DOM api, otherwise this construct would be pointless ... — Sebastian, Nov 05 '22 at 20:27

2 Answers2