0
181
Vistasmúltiples elementos personalizados, pero de una sola clase
Quiero crear muchos tipos diferentes de clases HTML... normalmente extenderá una clase y luego la registrará...
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)pero esto hace demasiadas clases..
Lo que pienso hacer es crear una clase con diferentes métodos .build(), es decir
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(){ ... }Quiero definir los métodos build() más adelante a medida que avance... más cerca de donde los usaré. Es por eso que los protipo
Los usaré así:
x1 = new X() x1.build1()de esta manera no tendré que definir nuevos elementos.
¿Hay una mejor manera?
imagine having to build a <table> with hardcoded tags <td1>,<td2>, ... <tdN>VS.
only <td> cells but different content, and doing it in JS.la jerarquía normal basada en clases + anular un método .build() funcionará, pero los elementos personalizados requieren que defina explícitamente() una etiqueta para cada nueva clase
una de las muchas cuadrículas dinámicas de cuadrículas en un "estado" específico. Todo es JS. No saques conclusiones... los datos son aleatorios ;)
Todos los elementos independientes tienen que ser propios sobre la marcha pseudo-clase de células, para lo cual utilizo el esquema de prototipo anterior.
1 Respuestas
Responde la pregunta0
Si crea una función para crear la clase y luego la define automáticamente, puede hacerlo. No estoy seguro de si hay otras formas de hacerlo, aunque puede intentar usar customElements.define con la misma class .
Una función que crea la clase se vería así:
function defineElement(classToCopy, elmname) { let copy = class extends classToCopy {} customElements.define(elmname, copy); }Todavía está creando las clases, pero al menos no tiene que hacerlo manualmente.
Sin embargo, realmente no recomendaría esto.
Lo que recomendaría es: dentro de su clase original, verifique un atributo (llamado "modo", por ejemplo). Si es igual a (...), use (...) el modo de compilación.