I have an image, I want to place an inscription inside it, the inscription should be positioned at the bottom center of this image, I add the image through java code (Image), the inscription in the “LitTemplate” also through java code, I don’t understand at all how this can be done (if anything, I don’t want to shove everything into 1 html file (so I can solve the problem), but I want to make everything modular)
For example, do this: add a child element to the image, and position it centered at the bottom (via java code)
I got something like this, tell me is this the right approach or a bad one? if it’s bad please suggest a replacement
The answer is as always, it depends. You do not reveal much about the context here, so it hard to say what is potentially wrong or not.
For example you use Element API to set all the styles. That can be sometimes ok, but typically not. When you do this, you can’t override the styles in your CSS file. Same applies to direct style manipulation in JavaScript too when you implement web components. Sometimes it is appropriate, especially when the style manipulation has some functional role in the component. But for me it looks more like you should only set CSS class names in those elements and move the styles to CSS file.
Second you use image as background for the Div. Again this can be totally appropriate if it is really a static resource meant for a background decoration. However if your intent is to show images dynamically from a data storage you should use Image component instead and set its source to be resource. Similar styles can be applied to Image than you now apply to Div as well.