Cannot override styles in Polymer template using Vaadin Flow

Flow
1

Hello,

I use Vaadin Flow RC5 and Spring Boot 2. I have Push activated.

I want change the CSS styles for background-color and color in my application. I try it with the following code inside my Polymer template:

<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="custom-element-template">
  <style>
    :host  {
      --custom-background-color: #4CAF50;
      --custom-color: #ffffff;
    }

    .changebleTheme {
      background-color: var(--custom-background-color);
      color: var(--custom-color);
    }
  </style>
  <template>
    <div class="changebleTheme" style="width: 100%; height: 100%; border: 1px solid lightgrey;">
    </div>
  </template>

  <script>
    class CustomElementTemplate extends Polymer.Element {
      static get is() {
        return 'custom-element-template';
      }

      changeTheme() {
        this.updateStyles({
          '--custom-background-color': '#4CAF50',
          '--custom-color': '#ffffff',
        });
      }
    }

    customElements.define(CustomElementTemplate.is, CustomElementTemplate);
  </script>
</dom-module>

on Java side I call the following code inside my Java template implementation:

getElement().callFunction("changeTheme");

This is only an example!

My problem now is, that all is working fine in Firefox, but not in Safari or Chrome.

Can anyone help me out?

Greetings!

2

Hello,

The problem seems to be that the <style> -block is not inside the template.

That still works in Firefox and IE for they fall back to Shady DOM. But Chrome and Safari seems to honor the Shadow DOM and because of that, the styles outside of the template don’t apply.

In short: trying moving the <style>....</style> block inside of of <template> -block.

3

Ah, now it’s working! Thanks!