I'm most familiar with Django templates and Jinja2, and both of those provide template functions, filters, and/or various forms of control through which you can build up these sorts of abstractions.
I'd probably define a partial template for this dropdown as something like..
If you wanted more control over, say, the colours, you could just use an enum in your language of choice and provide a rendering function that turns it into the string `color:{{colour}};`, so that you retain some safety. You could do similar things with classes perhaps, keeping that as a list of strings and enforcing no whitespace or other separators in the text classes, then rendering to a whitespace separated string.
I feel like I should emphasize some of the text in my original question: 'Now suppose you need to allow the template user to pass in ANY attributes they want into the <div> tag, BUT you need to make sure that when it is finally rendered, one of its CSS classes MUST be `dropdown`.'
Fortunately, a Jinja guru in another channel showed me how to do it using a macro:
This pulls out the `class` attribute's value using the keyword argument and lets me render ALL the other passed-in attributes using the `kwargs` special variable. So, problem solved, with some abstraction, you're right.
BUT, for this `<combo-box>` custom element I also need to pass in multiple 'slots' ie children elements to inject inside various parts of the final rendered component. With HTML generation functions and values, this is relatively easy. With a template, it's possible but very unintuitive and ugly-looking, unfortunately!
I'm most familiar with Django templates and Jinja2, and both of those provide template functions, filters, and/or various forms of control through which you can build up these sorts of abstractions.
I'd probably define a partial template for this dropdown as something like..
If you wanted more control over, say, the colours, you could just use an enum in your language of choice and provide a rendering function that turns it into the string `color:{{colour}};`, so that you retain some safety. You could do similar things with classes perhaps, keeping that as a list of strings and enforcing no whitespace or other separators in the text classes, then rendering to a whitespace separated string.