Question

0

111

Vistas

multiple custom-elements, but single class

I want to create many different type of HTML classes.. normally you will extend a class and then register it..

class X1 extends HTMLElement {}
customElements.define('el-x1',X1)
class X2 extends HTMLElement {}
customElements.define('el-x2',X2)
........
class XN extends HTMLElement {}
customElements.define('el-xN',XN)

but this makes too many classes ..

What i think of doing is create one class with different .build() methods i.e.

class X extends HTMLElement {}
customElements.define('el-x',X)


X.prototype.build1 = function(){
    this.setAttibute(...)
    el = document.createElement(...)
    ...
    this.appendChild(el)
}


X.prototype.build2 = function(){ ... }
X.prototype.build3 = function(){ ... }
X.prototype.buildN = function(){ ... }

I want to define the build() methods later as I go ... closer to where I will use them. Thats why I would protype them

I will use them like this :

 x1 = new X()
 x1.build1()

this way I wont have to define new elements.

Is there a better way ?

 imagine having to build a <table> with hardcoded tags <td1>,<td2>, ... <tdN>

VS.

 only <td> cells but different content, and doing it in JS.

normal class based hierarchy + overriding a .build() method will work, but custom-elements require you to explicitly define() a tag for every new class

one of many dynamic grid-of-grids in specific 'state'. Everything is JS. Dont make conclusions.. the data is random ;)

All standalone elements have to be their own on the fly cell-pseudo-class, for which i use the prototype scheme above.

7 months ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-06T16:21:06.204Z

If you make a function to create the class and then automatically define it, you can do that. I'm not sure if there are any other ways to do that, although you can try using customElements.define with the same class.

A function that creates the class would look something like this:

function defineElement(classToCopy, elmname) {
    let copy = class extends classToCopy {}
    customElements.define(elmname, copy);
}

It's still creating the classes, but at least you don't have to manual do it.

I wouldn't really recommend this, though.

What I would recommend is: inside of your original class, make a check for an attribute (called "mode," for example). If it's equal to (...), then use (...) build mode.