html import problem after naviate to other view

Flow
1

Hello,

I hit wall with another problem in Vaadin 13.

I’m navigating from login page to other view, but my dom styles vanish.

 UI.getCurrent().navigate(View1.class);

and in View1.class -:

@HtmlImport(value = "frontend://menu-styles.html", loadMode = LoadMode.EAGER)
public class View1 extends VerticalLayout{

	public View1(){
		Button button = new Button("test");
		button.addClassName("menu-item");

		add(button);
	}

}

menu-styles.html :

<dom-module id="menu-item" theme-for="vaadin-button">
    <template>
        <style>

            :host {
				 color: green;
            }

            :host(.active){
                color: yellow;
            }

        </style>
    </template>
</dom-module>

After navigate to View1 i dont see css added to my button, but after i reload my view (F5) all dom styles come back… Anyone know how to resolve this?

Maybe its bug or something…

2

I made it by additional annotation on login view.

@HtmlImport(value = "frontend://menu-styles.html")

Anyway is there any chance that in dom model i dont need write everywhere “:host(.menu-item)” because i want this styles only for one component…

<dom-module id="menu-item" theme-for="vaadin-button">
    <template>
        <style>

            :host(.menu-item) {
               ??
            }

            :host(.menu-item) [part]
 ::slotted(span) {
                 display: inline-block;
            }

            :host(.menu-item)  [part]
 ::slotted(iron-icon) {
              ??
            }

            :host(.menu-item) .vaadin-button-container{
                justify-content: left;
            }

        </style>
    </template>
</dom-module>

If someone need justify button content to left… look up. If you have dynamic hover resize layout you need set display to inline-block. Without it component will just jump around…

3

Next problem in Mozzilla Firefox… look at attachment menu1.PNG. I cannot remove text wrap on span element in button without fixed --lumo-button-size.

On chrome or edge its look like (attachment menu2.PNG) but on mozzila without change in css i got text cut (…).

 :host(.menu-item) {
	  --lumo-button-size: 80px;
 }

Anyone got any similiar problem with it?
17585306.png
17585309.png