Open SebastianKuehnau opened 6 months ago
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)
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