DEV Community

Cover image for Using custom HTML Attributes
Winston Puckett
Winston Puckett Subscriber

Posted on

Using custom HTML Attributes

Just want to see the result? Head to https://winstonpuckett.com/blog and click on the search button.

I wanted a meaningful reason for people to visit my "blog" page. It was just a copy of my home page without the excerpt about how I liked good code. I realized a search bar would add a lot to the user experience.

I had only one problem. My entire blog was pre-rendered with 11ty. I wanted a way to grab the tag list without stuffing everything into a JS rendered component. That's when I found custom attributes.

Setting and Getting

Any attribute that starts with "data-" gets saved into the dataset variable for a component. For example:

<p id="element" data-my-variable="value">example</p>
Enter fullscreen mode Exit fullscreen mode

Can be queried like so:

const $el = document.querySelector('#element');
const myValue = $el.dataset.myVariable;
Enter fullscreen mode Exit fullscreen mode

As you can see, the JavaScript can access any attribute with the "data-" prefix from the dataset variable on the node. It automatically translates variable names from kebab-case to camelCase to align with JS standards.

Storing complex types

My next challenge was the limitation on what types you can store in the variable. I had an array of tags that I wanted to store, not a string. Because I am using Liquid templates with 11ty, I was able to insert the array like so:

<div class="card" data-post-tags='{{ post.tag_list }}'></div>
Enter fullscreen mode Exit fullscreen mode

Notice the single quotes so that each double quote in the array is assumed to be part of the string.

Then to access it, I had to parse the array with JSON.parse().

const $card = document.querySelector('.card');
const tags = JSON.parse($card.dataset.postTags);
Enter fullscreen mode Exit fullscreen mode

At that point, the tutorial is more about array methods in JS. I used document.querySelectorAll, filter, and includes to find all of the relevant and not relevant posts based on the search input. It was really easy. I was so grateful to have a way to embed custom tags into html and retrieve them through a simple JS API.

Where to go from here

Go check out the search bar in action: https://winstonpuckett.com/blog.

At this point, none of the JS is minimized, so it's easy to see how everything works in the script tag just above the input. I do store it in a separate JS file, but it is baked into the HTML when you run eleventy.

Want to see the full source code? https://github.com/winstonpuckett/blog

Billboard image

Synthetic monitoring. Built for developers.

Join Vercel, Render, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (0)

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay