Currently, I am immersed in the tutorial on Vaadin elements using Angular 2 that I stumbled upon here
In section 5.3, Styles are applied to the app.component.ts as shown below
import { Component } from [email protected]/core';
@Component({
selector: 'my-app',
template: `
<app-header-layout has-scrolling-region>
<app-header fixed>
<app-toolbar>
<div title spacer>All heroes</div>
</app-toolbar>
</app-header>
<div>My application content</div>
</app-header-layout>
`,
styles: [`
app-toolbar {
background: var(--primary-color);
color: var(--dark-theme-text-color);
}
`]
})
export class AppComponent { }
The variables in the styles do not get applied in the component, but when I modify the colors to red or blue like this:
app-toolbar {
background: red;
color: blue;
}
It works perfectly fine which means that the variables are not being recognized.
Upon checking the index.html, I noticed that there is a style applied to the body tag which also utilizes variables.
<!-- Styles -->
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="bower_components/paper-styles/color.html">
<link rel="import" href="bower_components/paper-styles/default-theme.html">
<link rel="import" href="bower_components/paper-styles/typography.html">
<link rel="import" href="bower_components/paper-styles/shadow.html">
<style is="custom-style">
body {
@apply(--layout-fullbleed);
@apply(--paper-font-body1);
background: var(--primary-background-color);
color: var(--primary-text-color);
}
</style>
Interestingly, these variables are found and applied successfully. To test this, I replaced a variable with another as shown below:
<style is="custom-style">
body {
@apply(--layout-fullbleed);
@apply(--paper-font-body1);
background: var(--paper-pink-a200);
color: var(--primary-text-color);
}
</style>
This change turns the background pink and functions correctly.
These variables mainly originate from the color.html and default-theme.html files and are initialized like so
default-theme.html
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="color.html">
<style is="custom-style">
:root{
--primary-text-color: var(--dark-theme-text-color);
--dark-theme-text-color: #ffffff;
--primary-color: var(--paper-indigo-500);
</style>
color.html
<link rel="import" href="../polymer/polymer.html">
<style is="custom-style">
--paper-indigo-500: #3f51b5;
--paper-pink-a200: #ff4081;
</style>
There seems to be an issue where variables are applied in the index.html but not in the app.component.ts file even though I followed the tutorial diligently. Any assistance in resolving this would be greatly appreciated.
EDIT:
I have also included "emitDecoratorMetadata": true in my code as advised by a comment (which has since been removed for some reason), and there are no errors or warnings related to this issue in my Chrome console. If further information is required, please feel free to ask and I will provide it.