Description
The theming widget fails to override the default sample theme because the generated <style id="igniteui-theme"> element is inserted in the wrong position in <head>.
Currently, styles are injected using:
head.insertBefore(styleEl, head.lastElementChild);
Source:
|
this.document.head.insertBefore(typefaceElem, this.document.head.lastElementChild); |
|
} |
This places the theme styles before Angular’s global stylesheet (styles.scss), which remains last in the DOM and therefore takes precedence in the CSS cascade.
As a result:
- Theme styles are correctly generated and updated
- Messages are received and
<style> is present in the DOM
- But no visual changes occur because rules are overridden by later styles
Expected behavior
Theme styles should override default sample styles.
Actual behavior
Theme styles are overridden due to incorrect DOM order.
Proposed fix
Replace:
head.insertBefore(styleEl, head.lastElementChild);
with:
head.appendChild(styleEl);
This ensures the theme styles are last in <head> and win in the cascade.
Additional context
- In
app-lob, the issue is amplified because both AppComponent and DocsLayoutComponent inject theme styles, leading to multiple <style> elements where stale ones can override newer updates.
Description
The theming widget fails to override the default sample theme because the generated
<style id="igniteui-theme">element is inserted in the wrong position in<head>.Currently, styles are injected using:
Source:
igniteui-angular-samples/src/app/app.component.ts
Lines 47 to 48 in f97e514
This places the theme styles before Angular’s global stylesheet (
styles.scss), which remains last in the DOM and therefore takes precedence in the CSS cascade.As a result:
<style>is present in the DOMExpected behavior
Theme styles should override default sample styles.
Actual behavior
Theme styles are overridden due to incorrect DOM order.
Proposed fix
Replace:
with:
This ensures the theme styles are last in
<head>and win in the cascade.Additional context
app-lob, the issue is amplified because bothAppComponentandDocsLayoutComponentinject theme styles, leading to multiple<style>elements where stale ones can override newer updates.