javascript - CSS不适用于Chrome中的Polymer 2 Web组件

我有一个下面定义的Polymer v2 Web组件。在主页中，我包括一个CSS文件，该文件定义了名为n-action-button的样式。当我在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;
}

最佳答案

全局样式不应影响阴影dom内部的元素。恐怕您的方法仅在以前由于polyfill的局限性才起作用。现在，使用聚合物2，您可以获得真正的阴影dom和封装。

因此，要使封装正常工作，您必须公开cs mixin并全局设置它们。

例：

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