For your first question, I think the HTML is assembled on the fly somehow. I'm not clear on the details and would be happy to learn more.
For your second question: you can do this sort of thing in Composer with a ValueDisplay widget. (It is only possible to modify mashups via Javascript if you create a custom widget.)
1) Create your lights as Media Entities.
2) Create a State Definition where "true" is associated with a custom style that displays the green light, and "false" with a custom style that displays the red light. (If you'll reuse the images, you might want to use persistent Style Definitions instead.)
3) Create a ValueDisplay widget in the mashup. Click on its ValueFormat field.
4) Set Renderer to String and Format to Show No Text. (Possibly an Image renderer might work too, but I've had more luck with String.)
5) Choose State-Based Formatting and choose your boolean and your state definition. (But if you change the state definition in the future, you'll have to come back and re-select it here, because the definition is imported and not just referenced.) Click Done.
6) Bind your boolean to the Data field of the ValueDisplay.
7) If your images are the wrong size, set the ImageScaling field. (But don't use Height, which is currently broken in 7.0 and 7.1.)
It's kind of a pain, but I hope this helps.
