Sometimes I want to attach classes directly to the top level of a custom element that will always be present on the custom element, regardless of where it’s being used, while also wanting to be able to add additional classes to it depending on the context of where it’s being used.
Therefore, how can I apply classes to a custom element in both the custom element’s view and in the parent/consuming view?
For example, if I have a custom element:
and I then want to add a class to it in the parent view, where I’m consuming it:
context-specific-class will always overwrite
Is there a way to get around this without having to nest everything in the custom element in a redundant
div, like this?
You don’t mention it, but have you looked at style and css binds versus class? I believe they are additive to the class.
I have, this is more a question about whether it’s possible to combine classes additively. I realize there are messier ways to get around my issue so that styles can be applied by both the element itself as well as its consumer, but I’m looking for a more elegant solution (if it exists).
I am not sure if it has to do with any recent updates, since your post is about 3 months old now, but I just tried the code below:
This is a custom element
This seems to work just fine. Both
context-specific-class are assigned to the
<custom-element> element when I inspect it in the browser.
Am I perhaps misinterpreting your issue at hand? (I don’t think so, since I remember a similar issue when I tried something like this a while ago, but I fail to reproduce it now. So I do suspect that something got updated in Aurelia lately.)