CSS 未应用于 Chrome 中的 Polymer 2 Web 组件

Question

我在下面定义了一个 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;
}

Answer 1

这可能是因为 Shadow DOM's style encapsulation. Polymer 1 （Shadow DOM 的 polyfill）适用于所有浏览器，但在 Polymer 2 中，如果浏览器支持，Shadow DOM 是默认值，下降仅在必要时返回 Shady DOM（IE 和 Firefox 就是这种情况）。

您可以通过在 webcomponents.js 脚本的 <script> 标签上指定一个属性来在 Polymer 2 中强制使用 Shady DOM：

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

demo

一个好的参考可能是 Polymer's upgrade guide regarding Shadow DOM。

Answer 2

全局样式不应影响阴影中的元素 dom。恐怕但由于 polyfill 的限制，您的方法以前只起作用。现在使用聚合物 2，您将获得真正的阴影 dom 和封装。

所以为了封装工作，你必须公开 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>

CSS 未应用于 Chrome 中的 Polymer 2 Web 组件

CSS not applied to Polymer 2 web component in Chrome

javascript

css

google-chrome

polymer

polymer-2.x