Vanilla theme css

[ghost]

Problem

I am making an app with electron and Angular and when I work with the Material Design theme evrything works fine but when I want to work with the Vanilla Design theme then nothing shows up.

What I have done

I added next line to Styles array: node_modules/xel/themes/vanilla.css

Solution

I have found a solution but still wanted to report it because i don't know that what I am doing is legit:

I deleted this from the vanilla.css: *:not(:defined) { display: none; }

[jarek-foksa]

I just checked several Angular demo apps and they appear to rely on custom elements such as <app-root> which were not properly registered with customElements.define().

So the proper fix would require replacing:

*:not(:defined) {
  display: none;
}

with:

x-button:not(:defined),
x-checkbox:not(:defined),
...
x-input:not(:defined) {
  display: none;
}

[ghost]

I just checked several Angular demo apps and they appear to rely on custom elements such as <app-root> which were not properly registered with customElements.define().

So the proper fix would require replacing:

*:not(:defined) {
  display: none;
}

with:

x-button:not(:defined),
x-checkbox:not(:defined),
...
x-input:not(:defined) {
  display: none;
}

For evry Xel element?

[jarek-foksa]

Yes.

[jarek-foksa]

Fixed in Xel version 0.9.