Application Theme is not applied to templates in DevMode

Description of the bug

I have integrated templates into a flow view via @JsModule("") annotation and cannot use style definitions on the application theme in Dev Mode. Not even as described in the documentation if I overwrite the createRenderRoot method inside the template.

@Artur- mentioned bundle mode is broken and it works with vaadin.frontend.hotdeploy=true

Expected behavior

I would expect, that the application is applied as described here (https://vaadin.com/docs/latest/create-ui/templates/styling-templates)

Minimal reproducible example

https://gitlab.vaadin.com/seb/my-todo

take a look into the TemplateView

Versions

Vaadin / Flow version: 24.3.5
Java version: 21
OS version: MacOS 14.3.1
Browser version (if applicable): Chrome, Safari
Application Server (if applicable):
IDE (if applicable): IntelliJ

I think an explanation can be found in the documentation for Faster Starts by Pre-Compiling, where it is mentioned that

When customizing an <<{articles}/flow/styling/application-theme#,Application Theme>> in this mode, the following points should be taken into account:

Loading CSS into the shadow DOM of Vaadin components by placing them in the theme's components sub-folder requires the running of a frontend development server.

Vaadin component styles are set in [filename]styles.css, or in the imported stylesheet file located in the theme directory, with the ::part() selector.

So, my understanding is that the described behavior is the expected one. For styles to work in shadow DOM you need either to start the dev-mode server or user the part selector.

If the in template you apply a part to the text-field (<vaadin-text-field part="testme" id="firstInput"></vaadin-text-field>) and style the web component as template-view::part(testme) { background-color: yellow; }, the CSS rule is applied.

Styling vaadin-text-field directly works if you avoid using shadow DOM in your component, as in the documentation example, by setting

    protected override createRenderRoot() {
        return this;
    }

That said, if this is the correct behavior, the documentation page you mentioned should probably be improved to mention the differences that should be considered when using a dev-bundle (or just link to the "Faster Starts by Pre-Compiling" page)

vaadin / flow