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 defaults to Shady DOM（用于Shadow DOM的polyfill），但在Polymer 2中，如果浏览器支持，则Shadow DOM是默认值，仅在必要时才回退到Shady DOM（IE和Firefox就是这种情况））。

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

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

demo

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

Answer 2

全局样式不应影响阴影dom中的元素。我担心，但由于polyfills的局限性，你的方法才有效。现在使用聚合物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>

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

2 个答案: