element class not assuming

Hello.

I added a @HtmlImport (“styles.html”) in MainView, and this was uploaded to the page as seen in the image.

In a view that uses the MainView.class as layout I used in a button to class bgg:
btn.addClassName ("bgg");

but is not assuming the class bgg

see the image.

Can someone help me?
17753777.jpg

What version of Vaadin are you using? Would you please share the content of styles.html?

The issue is that the button you are trying to style is inside the shadow root of your teste-view. You can see in the developer console that there is an expanded shadow root that contains the button.

CSS styles do not penetrate shadow roots, and thus don’t affect your button. There are a few possible solutions.

  1. Refactor your shared-styles.html to look like this
<dom-module id="shared-styles">
    <template>
        <style>
            .bgg {
                background-color: green;
            }
        </style>
    </template>
</dom-module>

<custom-style>
    <style include="shared-styles">
	    /* You can put styles here that you don't want to be included in shadow roots */
	</style>
</custom-style>

And then also include it in your teste-view as such

<link rel="import" href="../styles/shared-styles.html">
<dom-module ...>
   <template>
      <style include="shared-styles">
          ...
	  </style>
  ...
  1. If you only want this to apply to vaadin buttons, you can create a style module for them, for example in your shared-styles:
<dom-module id="button-style" theme-for="vaadin-button">
    <template>
        <style>
            :host(.bgg) {
                background-color: red !important;
            }
        </style>
    </template>
</dom-module>
  1. Render the contents of your template into the light DOM, this is a bit tricky as it requires you to add them into a <slot>.

Erik Lumme:
The issue is that the button you are trying to style is inside the shadow root of your teste-view. You can see in the developer console that there is an expanded shadow root that contains the button.

CSS styles do not penetrate shadow roots, and thus don’t affect your button. There are a few possible solutions.

  1. Refactor your shared-styles.html to look like this
<dom-module id="shared-styles">
    <template>
        <style>
            .bgg {
                background-color: green;
            }
        </style>
    </template>
</dom-module>

<custom-style>
    <style include="shared-styles">
	    /* You can put styles here that you don't want to be included in shadow roots */
	</style>
</custom-style>

And then also include it in your teste-view as such

<link rel="import" href="../styles/shared-styles.html">
<dom-module ...>
   <template>
      <style include="shared-styles">
          ...
	  </style>
  ...
  1. If you only want this to apply to vaadin buttons, you can create a style module for them, for example in your shared-styles:
<dom-module id="button-style" theme-for="vaadin-button">
    <template>
        <style>
            :host(.bgg) {
                background-color: red !important;
            }
        </style>
    </template>
</dom-module>
  1. Render the contents of your template into the light DOM, this is a bit tricky as it requires you to add them into a <slot>.

thank you.
gave me a direction.