TextField with fixed validation message slot

Flow
1

I would like to have a TextField that always have some space below reserved for validation errors. The idea is that the form layout never changes, regardless of whether the value in the field is valid or not
So I came up with the following CSS:

<dom-module id="fixed-validation-text-field-theme" theme-for="vaadin-text-field">
    <template>
        <style>
            [part="error-message"]
 {
                will-change: auto;
                transition: none;
                min-height: 1.6rem !important;
            }

            :host(:not([invalid]
)) [part="error-message"]
 {
                max-height: none !important;
                min-height: 1.6rem !important;
                color: var(--lumo-base-color);
            }
        </style>
    </template>
</dom-module>

Is it the way it should be done?

2

So, I played a bit more and found even more concise css:

<dom-module id="fixed-validation-text-field-theme" theme-for="vaadin-text-field">
    <template>
        <style>
            :host(.fixed-validation-text-field) [part="error-message"]
 {
                will-change: auto;
                transition: none;
                min-height: 1.6rem !important;
                max-height: none;
            }

            :host(.fixed-validation-text-field:not([invalid]
)) [part="error-message"]
 {
                color: rgba(255, 255, 255, 0);
            }
        </style>
    </template>
</dom-module>

I decided to use a class name (fixed-validation-text-field) to make selectors more specific so that I don’t end up with every single text field in the app working that way.

What do you think?