Hey there!
So, I'm currently working on a project involving a small AngularJs component that generates a tag-like unit. Within this component, I've set some basic styles such as colors and borders as default values. The idea is for outer components to be able to customize these styles by altering the CSS variable value. Here's a sample of the setup:
tagLike.html
.tag-like-container {
--tag-like-color: red;
color: var(--tag-like-color);
} <div class="tag-like-container">
my tag
</div>Subsequently, an outer component will interact with it
outerComponent
.outer-container {
--tag-like-color: blue;
}<div class="outer-container">
<tag-like></tag-like>
</div>The issue arises when the final value of --tag-like-color turns out to be red instead of blue, and that’s what I need help with. Any suggestions on how to tackle this?
Thank you!