[Bug]: Webpack sample does not respect change of themes

[mddragnev]

Which component(s) are affected?

Theming & Styles

Description

Having a Web Components app using Webpack does not change the themes of a component if the theme is imported in the main index.html like this:

<link rel="stylesheet" href="https://unpkg.com/igniteui-webcomponents@6.4.0/themes/light/material.css" />

Somewhat connected to: IgniteUI/igniteui-angular#16758

Reproduction

combo.zip

Run the attached sample and observe the igc-combo

You can see in the console that the theme token of the combo is set to bootstrap. However, in the index.html file the imported theme is material

Workaround

This works correct if the theme is imported in typescript file like:

import "igniteui-webcomponents-grids/grids/themes/light/material.css";

This also works correct if the build tool is vite

Is this a regression?

No or unsure. This never worker, or I haven't tried before.

Affected versions

6.4.0

Browser/OS/Node environment

Chrome, Webpack

[rkaraivanov]

@mddragnev
Unfortunately, this is happening since the current implementation parses root stylesheets and stylesheets from 3rd party origins cannot be accessed (i.e. throw and exception when trying to read the CSS rules), so the theme cannot be resolved.

As a workaround you can slap crossorigin on 3rd party resources which lifts the restriction.

<link rel="stylesheet" crossorigin href="https://unpkg.com/igniteui-webcomponents@6.4.0/themes/light/material.css" />

Anyway, we should definitely improve the theme resolve mechanism.