Vaadin要素でAngular 2コンポーネントにCSSスタイルが適用されないのはなぜですか？

Question

私は章5.3では、ここで

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

た角度2を使用してVaadin要素のチュートリアルをやって忙しいが、スタイルは以下の通りapp.component.tsに適用されている

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 { } 

スタイルの変数はコンポーネントには適用されませんが、色を赤または青に変更すると、次のようになります。

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

実際には動作しますが、変数が見つからないことを意味します。

私はindex.htmlに行き、bodyタグにも変数があるスタイルが適用されていることを確認しました。

<!-- 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> 

これらの変数は実際に見つかって適用されますが、

<style is="custom-style"> 
     body { 
      @apply(--layout-fullbleed); 
      @apply(--paper-font-body1); 
      background: var(--paper-pink-a200); 
      color: var(--primary-text-color); 
     } 
     </style> 

この変数は、背景がピンクに変わり、実際に動作します。

これらの変数は、主にcolor.html、デフォルト-theme.htmlで発見され、フォロー

デフォルト-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> 

として初期化されます

何らかの理由で変数がindex.htmlには適用されますが、app.component.tsには適用されません。私はこれを解決してくれるの？

編集： また、私のコードにコメントとして（これは何らかの理由で削除されていた）、"emitDecoratorMetadata": trueが追加され、私のCromeコンソールにこの問題に関するエラーも警告もありません。余分なものがある場合は尋ねる必要があります。

Answer 1

AngularはCSS変数とミックスインをサポートしていません。 これはポリマー機能であり、ポリマー要素でのみ機能します。

回避策として、スタイルを配置し、Vaadin要素をそのPolymerラッパー要素で囲むラッパーポリマー要素を作成します。