How to access a component's HTML attributes

Technical Questions
1

Builder content link
e.g. Builder.io: Drag and drop Visual CMS
https://builder.io/content/26522d31d06f4ecf92da68693db2f01b

Builder public api key
go to Builder.io: Drag and drop Visual CMS and copy your PUBLIC api key
64dd5478e25746bf9db3b6c0319905f6

What are you trying to accomplish
e.g. I want to integrate builder on a landing page

I have assigned a custom HTML attribute to a component, for example data-custom. I want to reference this value in a click event bound to custom code. What is the best way to do this? Something like state['data-custom'] would be my best guess

Code stack you are integrating Builder with
e.g. NextJS, react, Shopify
React

2

Hi Brandon,

Thanks for reaching out to support. To understand correctly, you have one HTML element with the data attribute data-custom. So when you click this data-custom element you want to grab some value from this element and use it elsewhere on your page?

If this is the case, you should be able to set state on the click event are target the value using basic JS, something like this…

state.someName = document.querySelector('data-custom')

This would set someName in the state object, and then in the element that you want to use this information, you can do a data element binding and reference it using state.someName

We have a great tutorial in our documentation about how to use and reference the State object to perform actions that should help to solidify the understanding.

Hope this was able to clarify things a bit further, but if you have any further questions, please feel free to reach back out!

Regards

3

Thanks for the reply. I do understand how to use state and document.querySelector(), however the example you provided would not work for me. Reason being: the element with data-custom is dynamically repeated. There could be multiple of them on the page. I was mainly wondering if Builder had a simple way for components to self-reference their DOM equivalents without using querySelector().

One method I could envision is by using the builder-id attribute, like querySelector(['builder-id="builder-09cb2528254c4582afc8c82967139a53"]). But then that begs the question: Is there a way for a component to reference its own builder-id? Haha.

Anyway, all said, what I was trying to do was a workaround for a completely separate issue. I found that Shopify blocks which have had their click binding removed by the user, will never be able to have a functioning click event after that point.

I ultimately worked around this bug by adding a custom code block after the components with data-custom, and manually assigned the click events via querySelectorAll() in client side JS.

4

Hi there,

Thanks for reaching back!

As of now, no not really. That workaround you mentioned sounds like a good option! If there are multiple, .querySelectorAll() may do the trick depending on your exact use case, and then write some JS to extract whatever information that you need. Your best bet would be using JS to extract any info from DOM elements, and then setting state.