Chrome fails to apply CSS to Polymer 2 web component

Question

Chrome fails to apply CSS to Polymer 2 web component

The implementation of my web component in Polymer v2 is causing a styling issue specifically in Google Chrome. Despite including a CSS file that defines a style called n-action-button, the styling is not being applied to the content of the web component in Chrome. Interestingly, the same styling works perfectly in FireFox and IE.

Prior to upgrading to Polymer v2, everything functioned correctly with the use of Polymer v1. According to the documentation I have consulted, externally-defined styles should be applied to web components. I am perplexed as to why this is not functioning as expected in the Google Chrome browser.

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

EDIT: This is how the style has been defined:

.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;
}

javascript css google-chrome polymer polymer-2.x

Answer 1

Answer №1

Your global styles should not be impacting elements within your shadow dom. The approach you were using may have only worked previously due to the limitations of the polyfills. With Polymer 2, true shadow dom and encapsulation are now possible.

To ensure encapsulation, you should expose CSS mixins and set them globally.

For example:

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

In your HTML, you can override specific values if needed by including a 'styles.html' file:

<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

Your global styles should not be impacting elements within your shadow dom. The approach you were using may have only worked previously due to the limitations of the polyfills. With Polymer 2, true shadow dom and encapsulation are now possible.

To ensure encapsulation, you should expose CSS mixins and set them globally.

For example:

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

In your HTML, you can override specific values if needed by including a 'styles.html' file:

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

Answer №2

The reason for this behavior could be attributed to the concept of Shadow DOM's style encapsulation. In Polymer 1, Shady DOM (a polyfill for Shadow DOM) is the default for all browsers. However, in Polymer 2, Shadow DOM is the default if supported by the browser, with a fallback to Shady DOM only if needed (such as in the case of IE and Firefox).

If you want to enforce the use of Shady DOM in Polymer 2, you can do so by adding an attribute to the <script> tag for the webcomponents.js script:

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

For a demonstration, you can check out this demo.

A helpful resource for further information on this topic is Polymer's upgrade guide regarding Shadow DOM.

Answer 4

The reason for this behavior could be attributed to the concept of Shadow DOM's style encapsulation. In Polymer 1, Shady DOM (a polyfill for Shadow DOM) is the default for all browsers. However, in Polymer 2, Shadow DOM is the default if supported by the browser, with a fallback to Shady DOM only if needed (such as in the case of IE and Firefox).

If you want to enforce the use of Shady DOM in Polymer 2, you can do so by adding an attribute to the <script> tag for the webcomponents.js script:

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

For a demonstration, you can check out this demo.

A helpful resource for further information on this topic is Polymer's upgrade guide regarding Shadow DOM.

Chrome fails to apply CSS to Polymer 2 web component

Answer №1

Answer №2

Similar questions

What is the process for uploading images in the backend of a Next.js API?

Is it possible to use the same identifier for both the name and id attributes in HTML?

Changes in browser size will not affect the height

Load different fonts dynamically based on environment configuration

Trouble arises when trying to insert a script tag into a live code editor using HTML

CSS login validator immobilized

Tips on how to stop label text from wrapping onto a new line and only show one line

Ways to create two distinct "on click" actions for a single image to execute two distinct tasks

"Enhancing Error Handling in Express with Node.js Middleware for Parsing

When attempting to click on the dropdown in Bootstrap, there is no content displayed

Is there a way to substitute a custom <form> element for the default <form> in an already existing plugin?

AngularJS secureHTML verify image click event

"Can you please show me how to create a hover effect on a button when it

Tips for correctly formatting a string to use with the setValue() method

React is unable to identify the `activeStyle` property on a DOM element

Navigating with Next.js Router: Dynamic URLs and the power of the back button

Every time the attribute of the Angular controller changes, it is reinitialized

THREE.JS ensures that the face normal is perpendicular to the face and facing outward

While developing an exam portal with Angular and Spring Boot, I encountered an issue when trying to incorporate a name field as [name]

Using PHP to create redirects within an iframe