In the realm of my application, css variables dominate the styling landscape, particularly with font-size.
:root {
--font_size_base: 16px;
}
body {
font-size: var(--font_size_base);
}
An issue arises when I attempt to craft a component that alters this root variable and dynamically increases the font size. However, within this particular component, I require the font size to remain fixed.
Within the component resides an HTML input type range:
ngAfterContentInit() {
this.form.valueChanges.subscribe((value) => {
if (value.fontSize) {
this.document.documentElement.style.setProperty(
'--font_size_base',
`${value.fontSize}px`
);
}
});
}
While this successfully modifies the font size, it inadvertently impacts the fonts contained within the component. I have attempted CSS changes through view encapsulation set to shadowdom, yet this proves futile as the styling is applied via a style tag directly on the body element, thus still affecting my component.
Efforts to assign a value within the component's internal CSS have proven fruitless:
:host {
--font_size_base: 12;
}
Is there a viable solution to this predicament? For further insight, please refer to this stackblitz showcasing the scenario: https://stackblitz.com/edit/angular-ivy-hghqm3?file=src/app/controller/controller.component.css