DEV Community

Discussion on: Better Web Components Pt. 1: Rendering Children ✔️

Collapse
 
gypsydave5 profile image
David Wickes

Couldn't help but notice that the HTML you used with the template is different to the other solutions - the additional span elements. Is there any way around this?

Collapse
 
raghavmisra profile image
Raghav Misra

I realized this problem, but chose to ignore it for the sake of simplicity. I will edit the post to fix this problem. Thanks!

To fix this, I would replace the entire placeholder <span> with the text, rather than changing its innerText. I'm sure there are other solutions, so let me know if you find one. ;D

Collapse
 
raghavmisra profile image
Raghav Misra

Another, much easier, solution would be to replace the <span> elements with <slot> elements. Although slots were made for use with the Shadow DOM, they aren't limited to that. The purpose of a slot is to be replaced, which means it's unlikely that they will be styled.