Is It Ok to Add Your Own Attributes to HTML Elements

Can I add a custom attribute to an HTML tag?

You can amend your !DOCTYPE declaration (i.e. DTD) to allow it, so that the [XML] document will still be valid:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
[
  <!ATTLIST tag myAttri CDATA #IMPLIED>
]>

#IMPLIED means it is an optional attribute, or you could use #REQUIRED, etc.

More information is in DTD - Attributes.

Is it OK to add your own attributes to HTML elements?

There has been much discussion about this:

Custom attributes - Yay or nay?
How to store arbitrary data for some HTML tags
Non-Standard Attributes on HTML Tags. Good Thing? Bad Thing? Your Thoughts?

At the end of the day, I am on the camp that believes data attributes are the best way to go. They are being introducted in HTML5 to avoid name conflicts. Essentially, if you want to store anything data related you just prepend "data-" on the attribute name:

<div class="user" data-userid="5"></div>

The only con to the whole thing is then that your XHTML won't validate, but I honestly don't care about that stuff. (That's right, I said it)

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

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.

Is it a bad practice to add extra attributes to HTML elements?

Yes. It is considered a bad practice. Your HTML (if it's 4.0) won't validate successfully. Instead, add a class like so:

<a href id="myLlink" class="climber" >...</a>

Remember that you can have multiple classes:

<a href id="myLlink" class="climber girl pretty" >...</a>

And you can use CSS or JQuery to select out stuff based on these classes, and selectively override style based on the combinations:

a.climber             { color: brown; }
a.climber.girl        { color: red; }
a.climber.girl.pretty { color: pink; }

Can I use standard attributes in custom HTML elements?

Section 4.13.3 of the HTML spec contains a list of the attributes that can be used with autonomous custom elements (ones that typically extend HTMLElement rather than some other existing element):

Content attributes:
Global attributes, except the is attribute

form, for form-associated custom elements — Associates the element with a form element

disabled, for form-associated custom elements — Whether the form control is disabled

readonly, for form-associated custom elements — Whether to allow the value to be edited by the user

name, for form-associated custom elements — Name of the element to use for form submission and in the form.elements API

Any other attribute that has no namespace (see prose).

Notably, custom elements can have any attribute names you desire, but with the exception of the ones listed above, these attributes won't have any of the special behavior you would expect from built-in elements if they happen to correspond to familiar attributes (such as type). You'll need to define this behavior yourself, of course.

You only need to use custom data attributes when extending a built-in element and wanting to repurpose the name of an existing attribute.

How to add custom attributes to standard HTML elements?

The data-* attribute are custom attributes; they're only use to store specific data that the web developer will use it in tater time in his code in JavaScript.

<button id="mybutton" class="btn btn-primary" data-intro-step="4" data-bind-action="matchmake-mp-role" data-track="playnow.matchmake.cqclassic.join" data-bind-intro="next" data-expansion="0" data-game="2048" data-platform="1" data-role="1" data-experience="1">
Play now
</button>

For example to access the data-intro-step value from jquery, developer may type $('#mybutton').attr('data-intro-step') or $('#mybutton').data('data-intro-step') and use it with somethiing in his code.

Usually they're add from php or a js framework like jquery-plugins or angularjs, and used in js. put you could also add them from js to use it later.

Can I just make up attributes on my HTML tags?

In HTML5, yes. You just have to prefix them with data-. See the spec.

Of course, this implies you should be using the HTML5 doctype (<!doctype html>), even though browsers don't care.

Is it a bad practice to use custom HTML attributes and style them with CSS?

Your custom attributes are not valid HTML. You must use data-* attributes if you want to put custom data on your elements. This makes what you are doing bad practice.

In addition, there are CSS classes already that should meet your needs, unless there is more to your question than you have described.