为什么 CSS 样式不适用于带有 Vaadin 元素的 Angular 2 组件？

Question

I am busy doing the tutorial on Vaadin elements using Angular 2 which I found here

https://vaadin.com/docs/-/part/elements/angular2-polymer/tutorial-index.html

In chapter 5.3, Styles are applied to the app.component.ts as follow

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 styles does not get applied in the component but when I change the color to red or blue like so:

app-toolbar {
      background: red;
      color: blue;
    }

It actually works, meaning that the variables are not found.

I went to the index.html and saw that there is a style being applied to the body tag which also has 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>

Though these variables are actually found and applied. I tested it out by swapping out for another variable as seen 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 variable turns the background pink and actually works.

These variables are mainly found in the color.html and default-theme.html and gets initialized as follow

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>

For some reason variables get applied in the index.html but not the app.component.ts and I followed the tutorial step by step. Can you help me solve this please ?

EDIT: Also added "emitDecoratorMetadata": true to my code as a comment (Which had since been removed for some reason) suggested and in my Crome console there are no errors nor any warnings about this issue. If there is anything extra you need ask and I shall provide

Answer 1

Angular doesn't support CSS variables and mixins. That's a Polymer feature and only works in Polymer elements.

As a workaround you could try to create a wrapper Polymer element where you put the styles and wrap the Vaadin element with that Polymer wrapper element.