• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

179
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.

enter image description here

almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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.

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda