Is it good practice to create custom HTML attributes for custom elements?

Question

When creating a custom element like <input-field>, should custom attributes still use the 'data-' prefix or would it be acceptable to simply use them as-is? Basically using variation="abc" vs data-variation="abc" for example.
And if it is allowed, would re-using existing attributes like type be allowed?

In addition, would it be bad practice to add custom properties to the element's object during creation like the following:

class InputFieldElement extends HTMLElement {
    constructor() {
        super();

        this.customProperty = {data: 123};
    }
}
customElements.define('input-field', InputFieldElement);

I'm aware that these methods work perfectly fine right now, but the question is more if it's actually intended behavior or if it's just a weird edge-case that could stop working at any moment.

Yes, data- attributes are still preferred

mplungjan
– mplungjan

2022-04-24 14:42:14 +00:00
Commented Apr 24, 2022 at 14:42 — mplungjan
– mplungjan, Commented Apr 24, 2022 at 14:42
using data- is a team decision.

Danny '365CSI' Engelman
– Danny '365CSI' Engelman

2022-04-25 07:04:25 +00:00
Commented Apr 25, 2022 at 7:04 — Danny '365CSI' Engelman
– Danny '365CSI' Engelman, Commented Apr 25, 2022 at 7:04

connexo · Accepted Answer · 2022-04-24 17:24:34Z

2

I have asked a similar question more than 3 years ago.

You're free to choose almost any attribute name you like, except the universal attributes ( e.g. id, class, title). In some cases even re-using attribute names that exist on some elements (like e.g. value, disabled, etc.) makes total sense so component consumers can work with your elements as though they were existing HTML elements.

Remember this freedom only applies when using autonomous custom elements (<foo-bar>), not when extending built-ins (<div is="foo-bar">)!

As to your second question, it's also totally okay to define/add properties in the constructor, but recent additions to the ES standard have added public and private class fields:

class InputFieldElement extends HTMLElement {
    customProp = {data: 123}; // public class field
    #abc = "Hello"; // only accessible from within this class via this.#abc
}

Except the private member, this class does exactly the same your class did, effectively saving you the need for a constructor. Please note that this is not yet available when assigning values to private or public class fields, meaning you cannot setup computed properties this way.

Regarding your specific question asking for type, having that attribute usually is an indicator of bad class design (which is true for HTMLInputElement e.g., resulting in text inputs with a use- and meaningless checked property, and checkboxes that have a readOnly property (which won't do anything either)), but cannot be changed any more due to web compat.

edited Apr 24, 2022 at 17:24

answered Apr 24, 2022 at 17:10

connexo

57.3k15 gold badges112 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

blueYOSHI Over a year ago

Thank you for the super in-depth answer and for the feedback about type! I mainly chose to combine it into one element to avoid code re-use but I will consider possibly changing it to avoid meaningless attributes.

Collectives™ on Stack Overflow

Is it good practice to create custom HTML attributes for custom elements?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related