[Go Make Things] Custom attributes in Web Components

By rahmat hidayat

Saturday, January 4, 2025

​ 🎉 New Year Sale! Now through the New Year, get 40% off your first year of Lean Web Club membership. Level-up as a developer. Click here to learn more. One of my favorite ways to customize Web Components is with custom attributes. Since writing that last article, I've gotten some questions around using custom attributes in Web Components, and I've also see their popularity increase a fair bit. Let's talk about some caveats and things to know. Why custom attributes? Probably the most common question I get is why use a custom attribute instead of [data-*] attributes? Personally, I think it provides a nicer authoring experience. Prefixing every customization with data-* can get really cumbersome. Being about to write things like target="#password" or group="true" is a lot simpler, especially if your options are more complex. This is, of course, entirely subjective! Linters won't like them HTML linters will typically tell you that custom attributes are invalid. Every single browser I've used handles them just fine, and you can get, set, and update them with JavaScript just like you would any other attribute. If having a completely error and warning free linting experience is your end goal, don't use custom attributes. Otherwise, they'll work just fine despite what the linter says. You could run into future collisions Perhaps the biggest danger of custom attributes is that a future update to the web platform adds an attribute whose name is the same as one you've used in your Web Components. For example, if [target] ever becomes a standard attribute, any Web Component using it as a custom one could see some unexpected collisions and behaviors. One way to reduce the likelihood of this is to always use hyphenated attributes (in the same way custom elements must always have a dash). I sometimes use things like [wc-*] or the name of the component itself. This can erode the benefits of using custom attributes traditional data attributes, but it can also make it more clear which attributes are specific to your Web Component. Cheers, Chris ​ Want to share this with others or read it later? View it in a browser.​ ​

Did someone forward this to you? Get Daily Developer Tips.

Don't want to get these emails? Totally cool. Update your subscriber preferences.

You can also unsubscribe from all emails from me, including updates to products you've purchased.

113 Cherry St #92768, Seattle, WA 98104-2205

Share :

Facebook Twitter Google+