DEV Community

Web Components Debut: My First Dive In

Pasquale De Lucia on December 07, 2023

Recently, I had the opportunity to explore web components for the first time in my web development career. This adventure was inspired by @maxart25...
Collapse
 
maxart2501 profile image
Massimo Artizzu

Hello Pasquale! Thank you for your kind words.

I may suggest that passing large, serialized objects into attributes is less than optimal, as it bloats your markup and you have to manually parse the data in the component. So you might prefer to get a reference to the element and pass the data as a property instead.

This requires JavaScript, of course, but it would be needed anyway. A simple inline <script> element is sufficient of you want to pass the data as soon as the page loads, but this approach would also allow you to hydrate your component later if needed. Of course, your component would need to handle missing data nicely and defer the action only when everything has been passed.

Collapse
 
nyruchi profile image
Pasquale De Lucia

Thanks so much, I'll definitely give it a try!

Collapse
 
dannyengelman profile image
Danny Engelman

Why would you want to pass HTML and SVG inside a JSON Object; just put it in lightDOM, need be in a <template>.

If this is SSR, just put the JSON Object in a <script> and init it from there.