Utilizing VueJS, I have created two custom web elements called service-card and slot-card. These elements allow for the customization of styles using CSS variables such as --pm-scale: 0.75.
slot-card can function independently but is also embedded within the inner HTML of service-card:
<slot-card ...>
<service-card ...>
...
<slot-card ...>
Both elements contain the following CSS which is "injected into the shadow root" per the VueJS documentation:
:host {
--pm-scale: 1;
}
(According to the documentation, "An SFC loaded in custom element mode inlines its tags as strings of CSS and exposes them under the component's styles option. This will be picked up by defineCustomElement and injected into the element's shadow root when instantiated.")
The issue arises on the page below where the value of pm-scale (.75) correctly overrides the variable for the top-level service-card, but the inner slot-card reverts back to the default value of 1:
<style>
.pm-widget {
--pm-scale: .75;
</style>
<body>
<service-card class="pm-widget" ...>
...
<slot-card class="pm-widget" ...>
</body>
In Chrome devtools, both the :host and pm-widget styles are applied to both elements. For service-card, pm-widget values override :host values, however for slot-card, it seems that the :host selector on the inner slot-card takes precedence over the pm-widget class. The top-level slot-card element is correctly styled with the pm-widget variable values.
What would be the most effective solution to rectify this situation? Any suggestions would be greatly appreciated!
I have attempted to override CSS variables utilized in the nested web component's styles. I anticipate that values defined in the final document should supersede those defined in the inlined :host selector of the nested component.