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:
custom-element.html <template class="custom-element-class"> ... </template>
and I then want to add a class to it in the parent view, where I’m consuming it:
parent-element.html <custom-element class="context-specific-class"></custom-element>
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?
<template> <div class="custom-element-class"> ... </div> </template>