クロムのポリマー2ウェブコンポーネントにCSSが適用されていません

Question

下記のPolymer v2 Webコンポーネントがあります。メインページには、n-action-buttonというスタイルを定義するCSSファイルが含まれています。 FireFoxやIEでメインページを開くと、スタイルはWebコンポーネントに適用されますが、Chromeで同じ操作を行うと、Webコンポーネントのコンテンツはスタイルされません。

アプリケーションがPolymer v1ライブラリを使用しているときは、すべて正常に動作していました。私がPolymer v2にアップグレードしたときに変更されました。私はネット上のドキュメントで、外部定義されたスタイルをWebコンポーネントに適用する必要があると読んでいます。なぜ私はそれがGoogle Chromeブラウザで動作していないのか分かりません。

<link rel="import" href="../polymer/polymer-element.html"> 
<dom-module id="login-form"> 
    <template> 
     <h1> 
      Use your username &amp; password to sign in. 
     </h1> 
     <form id="form" method="post" action="j_security_check"> 
      <input id="username" name="j_username" type="text" placeholder="username"/> 
      <input type="submit" id="submit" value="Log In" class="n-action-button"> 
     </form> 
    </template> 
    <script> 
    class LoginForm extends Polymer.Element { 
     static get is() { return 'login-form'; } 
    } 
    window.customElements.define(LoginForm.is, LoginForm); 
    </script> 
</dom-module> 

編集：スタイルは、次のようになります。

.n-action-button, 
.n-action-button:hover, 
.n-action-button:focus, 
.n-action-button:active, 
.n-action-button:visited, 
.n-action-button[disabled], 
.z-button.n-action-button, 
.z-button.n-action-button:hover, 
.z-button.n-action-button:focus, 
.z-button.n-action-button:active, 
.z-button.n-action-button:visited, 
.z-button.n-action-button[disabled] { 
    display: inline-block; 
    color: #fff; 
    text-shadow: none; 
    text-decoration: none; 
    padding: 15px 30px; 
    line-height: 22px; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px; 
    border: 0; 
    -webkit-transition: color .25s, background .25s; 
    -moz-transition: color .25s, background .25s; 
    -o-transition: color .25s, background .25s; 
    transition: color .25s, background .25s; 
} 

.n-action-button, 
.n-action-button:visited, 
.z-button.n-action-button, 
.z-button.n-action-button:visited { 
    background: #49b87b; 
} 

.n-action-button:hover, 
.n-action-button:focus, 
.n-action-button:active, 
.z-button.n-action-button:hover, 
.z-button.n-action-button:focus, 
.z-button.n-action-button:active { 
    color: #fff; 
    background: #4bbe7f; 
} 

.n-action-button[disabled], 
.z-button.n-action-button[disabled], 
.z-button.n-action-button[disabled]:hover, 
.z-button.n-action-button[disabled]:focus, 
.z-button.n-action-button[disabled]:active { 
    color: #fff; 
    background: #b1b1b1; 
} 

Answer 1

グローバルスタイルは、シャドウドーム内の要素に影響しません。私は恐れがありますが、あなたのアプローチはpolyfillの限界のために以前は働いていました。ポリマー2では真のシャドードームとカプセル化が得られます。

カプセル化が機能するには、css mixinsを公開し、それらをグローバルに設定する必要があります。

例：あなたがそれらを必要とする場合

<link rel="import" href="../polymer/polymer-element.html"> 
<dom-module id="login-form"> 
    <template> 
     <style> 
      #submit { 
       background: #49b87b; 
       display: inline-block; 
       color: #fff; 
       text-shadow: none; 
       text-decoration: none; 
       padding: 15px 30px; 
       line-height: 22px; 
       -webkit-border-radius: 6px; 
       -moz-border-radius: 6px; 
       border-radius: 6px; 
       border: 0; 
       -webkit-transition: color .25s, background .25s; 
       -moz-transition: color .25s, background .25s; 
       -o-transition: color .25s, background .25s; 
       transition: color .25s, background .25s; 
       @apply --submit; 
      } 
      #submit:hover, #submit:focus, #submit:active { 
       color: #fff; 
       background: #4bbe7f; 
       @apply --submit-hover; 
      } 
      #submit[disabled], #submit[disabled]:hover, #submit[disabled]:focus, #submit[disabled]:active { 
       color: #fff; 
       background: #b1b1b1; 
       @apply --submit-disabled; 
      } 
     </style> 

     <h1> 
       Use your username &amp; password to sign in. 
     </h1> 
     <form id="form" method="post" action="j_security_check"> 
       <input id="username" name="j_username" type="text" placeholder="username"/> 
       <input type="submit" id="submit" value="Log In" class="n-action-button"> 
     </form> 
    </template> 
    <script> 
     class LoginForm extends Polymer.Element { 
      static get is() { return 'login-form'; } 
     } 
     window.customElements.define(LoginForm.is, LoginForm); 
    </script> 
</dom-module> 

ので、あなたのHTMLにあなただけの特定の値をオーバーライドすることができます。 styles.html

<custom-style> 
    <style is="custom-style"> 
    html { 
     --submit: { 
       color: orange; 
      }; 
     --submit-hover: { 
       color: orange; 
       background: grey; 
      }; 
     --submit-disabled: { 
       color: green; 
       background: grey; 
      }; 
    } 
    </style> 
</custom-style> 

Answer 2

これが原因Shadow DOM's style encapsulationの可能性があります。 Polymer 1 defaults to Shady DOM（Shadow DOMのpolyfill）はすべてのブラウザで使用できますが、Polymer 2では、ブラウザでサポートされている場合はShadow DOMがデフォルトです（必要な場合のみShady DOMに戻ります）。

あなたはwebcomponents.jsスクリプトの<script>タグに属性を指定することにより、ポリマー2で日陰のDOMを強制することができます：

<script src="webcomponentsjs/webcomponents-lite.js" shadydom></script> 

demo

を適切な参照がPolymer's upgrade guide regarding Shadow DOMかもしれません。