Al crear un elemento personalizado como <input-field> , ¿deberían los atributos personalizados seguir usando el prefijo 'data-' o sería aceptable simplemente usarlos tal cual? Básicamente usando variation="abc" vs data-variation="abc" por ejemplo.
Y si está permitido, ¿se permitiría reutilizar atributos existentes como el type ?
Además, sería una mala práctica agregar propiedades personalizadas al objeto del elemento durante la creación como las siguientes:
class InputFieldElement extends HTMLElement { constructor() { super(); this.customProperty = {data: 123}; } } customElements.define('input-field', InputFieldElement);Soy consciente de que estos métodos funcionan perfectamente bien en este momento, pero la pregunta es más si es realmente un comportamiento previsto o si es solo un caso extraño que podría dejar de funcionar en cualquier momento.
Hice una pregunta similar hace más de 3 años.
Puede elegir casi cualquier nombre de atributo que desee, excepto los atributos universales (por ejemplo, id , class , title ). En algunos casos, incluso reutilizar nombres de atributos que existen en algunos elementos (como, por ejemplo, value , disabled , etc.) tiene mucho sentido para que los consumidores de componentes puedan trabajar con sus elementos como si fueran elementos HTML existentes.
¡Recuerde que esta libertad solo se aplica cuando se usan elementos personalizados autónomos ( <foo-bar> ), no cuando se amplían elementos integrados ( <div is="foo-bar"> )!
En cuanto a su segunda pregunta, también está bien definir/agregar propiedades en el constructor, pero las adiciones recientes al estándar ES han agregado campos de clase públicos y privados:
class InputFieldElement extends HTMLElement { customProp = {data: 123}; // public class field #abc = "Hello"; // only accessible from within this class via this.#abc } Excepto el miembro privado, esta clase hace exactamente lo mismo que hizo su clase, ahorrándole efectivamente la necesidad de un constructor . Tenga en cuenta que this aún no está disponible cuando se asignan valores a campos de clase privados o públicos, lo que significa que no puede configurar las propiedades calculadas de esta manera.
Con respecto a su pregunta específica que solicita type , tener ese atributo generalmente es un indicador de un diseño de clase incorrecto (lo cual es cierto para HTMLInputElement , por ejemplo, resulta en entradas de text con una propiedad checked sin uso y sin sentido, y casillas de verificación que tienen una propiedad readOnly (que ganó 't hacer nada tampoco)), pero ya no se puede cambiar debido a la compatibilidad web.