I am using VueJS to define two custom web elements, service-card and slot-card.
I allow CSS variables, e.g. --pm-scale: 0.75, to customize the style of the elements.
slot-card can be used independently, but it is also part of the inner HTML of service-card:
<slot-card ...>
<service-card ...>
...
<slot-card ...>
In both elements I have the following css, "injected into the shadow root" according to the VueJS documentation
:host {
--pm-scale: 1;
}
("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.")
My problem is that in the page below, the pm-scale value of .75 correctly overrides the variable for the top-level service-card, but the inner slot-card reverts 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 I see both the :host and pm-widget styles applied to both elements; for service-card, pm-widget values overrides :host values, however for slot-card the opposite happens... so it looks like the :host selector on the inner slot-card is considered more specific than the pm-widget class?
A top-level slot-card element is correctly styled with the pm-widget variable values.
What is the best way to fix this? Thanks!
I tried to override CSS variables used in the nested web component's styles. I expect values defined in the final document to override values defined in the inlined :host selector of the nested component.
