Vaadin Flow: How to add class name to Template

user_16686763 0
Viewed 177

I have a Vaadin Component in a template file:

import {LitElement, html} from 'lit-element';
import '@vaadin/vaadin-text-field/vaadin-text-field.js';
import '@vaadin/vaadin-button/vaadin-button.js';

class HelloWorld extends LitElement {

    render() {
        return html`
            <div>
                <vaadin-text-field id="firstInput"></vaadin-text-field>
                <vaadin-button id="helloButton">Click me!</vaadin-button>
            </div>`;
    }
}

customElements.define('hello-world', HelloWorld);

and the server side java class file:

@Tag("hello-world")
@JsModule("./src/hello-world.ts")
public class HelloWorld extends LitTemplate {

    /**
     * Creates the hello world template.
     */
    public HelloWorld() {
        addClassName("my-style"); // Method not available!!
    }
}

In the java class I want do add a class name to the whole Template Component to style it dynamically. But the method "addClassName()" is not available in LitTemplate. Is it possible to add a class name to a LitTemplate? In the Browser Inspector I can add 'class="my-style"' to the hello-world component manually and it works.

vaadin-flow vaadin
2 Answers
user_92749480

Implementing HasStyle should work:

@Tag("hello-world")
@JsModule("./src/hello-world.ts")
public class HelloWorld extends LitTemplate implements HasStyle {
    public HelloWorld() {
        addClassName("my-style");
    }
}
user_2804100
Related