The prismicH.asHTML will stripe out the data attributes

Developing with Prismic
1

Hi team,

I've been using the Prismic Helpers library to serialize the HTML, but any attribute I add to the element is stripped out. Could you please tell me which part of the code is incorrect?

Thank you in advance

htmlSerializer = (type, element, text, children) => {
      
        if (type === "heading2") {
            return `<div id="h2" data-id="h2"><h2>${ text }</h2></div>`
        }
        // expected get <div id="h2" data-id="h2"><h2>Heading<h2></div>
        // instead, i get <div><h2>Heading</h2></div>

        return null;
};

renderHtml(element: []) {
        return prismicH.asHTML(element, null, this.htmlSerializer);
}
3

Hello @jia

Thanks for reaching out to us.

HTML serliazer is used for formatting the design of HTML elements with classname. If you want to handle the id or data id, you must create your own HTML Serializer.

For now, It works like that:

` return `<div class = "h2"><h2>${ text }</h2></div>``

Reference: HTML Serializer - Documentation - Prismic

Thanks,
Priyanka

4

Thanks @Priyanka

How to create our own HTML Serializer? Cause we want to retain all the existing format but with the flexibility to add the ID for certain elements.

5

Hello,

Prismic Libraries only support HTML serializers with class names only. You need to overwrite the library functions in your code where Prismic helpers are using html serliazer.

In your case, it should be prismicH.asHTML. It will be tricky but that's the only way to achieve it.

Thanks,
Priyanka