35. Data Attributes and Custom Elements
35.1 Custom Data Attributes (data-*)
Sometimes you need to store extra data on standard HTML elements that is invisible to the user but accessible to JavaScript. The data-* attribute prefix allows you to do this without invalidating your HTML.
html
Usage: JavaScript can easily retrieve this information to manage shopping carts, track user behavior, or change component state.
35.2 Understanding Custom Elements (A Look Ahead)
While creating custom elements is primarily done using JavaScript (Web Components), HTML supports the structure.
Custom elements allow developers to define their own tags (e.g., <my-alert> or <user-card>), promoting reusability and clean code. They must contain a hyphen in the name.
html
This is where the magic of Web Components begins, bridging HTML and advanced JS.