shadow-root does not load initially unless CTRL R is used.

Hi,

I have been experimenting with Vaadin 10 Flow and and have encountered the following problem. I have used the movie reviews starter app as a basis for application. All works very well however I have one problem that I cannot resolve and someone may help.

I have created a theme module for “my-text-field” and it is as follows.



:host(vaadin-text-field) [part=“input-field”]
{
background-color: #909090 ;
}
:host(.ok) [part=“input-field”]
{
background-color: #40bf80;
}
:host(.nok) [part=“input-field”]
{
background-color: #ff0000;
}
:host(.view-toolbar__search-field) [part=“input-field”]
{
background-color: #909090;
}


When I initially go to the page of my application and look at the elements in the chrome browser I get what looks like the default vaadin-text-field and none of my styling changes are applied.
See attachement 1 (InitialTextBox.png)

If after the page initially loads I do a CTRL R (reload the page)
My styling works and the search box has the styling I am looking for ( dark grey )
See Attachment 2 (TextBoxAfterReload.png)
Also when I look at the elements in the developer window of chrome I get the following
See attachment 3 (DeveloperViewAfterReload.png)

The #shadow-root (open) has appeared and all the styling works exactly as expected.

Grateful for any suggestions or explanations as to what is happening.

Best Regards
john.

17540338.png
17540341.png
17540344.png

Hi John,

I had the same problem with my Grid and ended up extending the Grid and adding the @HtmlImport of the theme to the class. I’ve not had to do that with my TextFields though…

Where are you importing your theme module? and where is it located?

My theme module for text fields looks like this…

<dom-module id="my-text-field-styles" theme-for="vaadin-text-field vaadin-text-area">
    <template>
        <style>
            :host(.custom-style) [part="input-field"]
 {
                border: 1px solid #ccc;
                background-color: rgba(195, 195, 5, 0.31);
                font-size: var(--lumo-font-size-m);
                line-height: 18px;
                border-color: white;
            }
        </style>
    </template>
</dom-module>

As long as I set the class names of my TextFields to ‘custom-style’ it works fine. I import the theme in my main UI class. (I’ll be able to check what I did with my grid tomorrow.)

Stuart.

Thanks, Stuart.

I have tried several ways at this stage. At the moment what I have is as follows:-

I have created the theme module called my-text-field.html and put it in frontend/src/views/paymentslist/my-text-field.html.
I did have it in my “shared-styles.html” file but it behaved in exactly the same way.

I import the theme module with an @HtmlImport in the paymentslist class that I am using.

@HtmlImport("frontend://src/views/paymentslist/my-text-field.html")
public class PaymentsList extends PolymerTemplate<PaymentsModel> {
    private final Logger mLogger = LoggerFactory.getLogger(PaymentsList.class);
.....

My theme module did not show up in the post last time - this is it.
I don’t really want to have to extend TextField. Everything works fine except I need to do this reload at the beginning.

<dom-module id="my-text-field" theme-for="vaadin-text-field">
    <template>    
         <style include="vaadin-text-field-default-theme"> 
            :host(vaadin-text-field) [part="input-field"]
 {  
               background-color:  #909090 ;   
            }            
            :host(.ok) [part="input-field"]
 {  
               background-color:  #40bf80;   
            }            
            :host(.nok) [part="input-field"]
 {  
               background-color:  #ff0000;   
            }
            :host(.view-toolbar__search-field) [part="input-field"]
 {
               background-color:  #909090;               
            }           
        </style>
    </template>

    <!-- Polymer boilerplate to register the my-text-field element -->
    <script>
        class MyTextFieldElement extends Polymer.Element {
            static get is() {
                return 'my-text-field'
            }

            _isEmpty(array) {
                return array.length == 0;
            }
        }
        customElements.define(MyTextFieldElement.is, MyTextFieldElement);
    </script>

</dom-module>

Thanks again,

John.