Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Where to include a web components css file when integrating a third party w
I am trying to integrate a web component in Vaadin 14 (ala https://vaadin.com/docs/v14/flow/web-components/integrating-a-web-component.html).
However the web component I am integrating has both a js file and a css file. The document explains to use @JsModule to include the js file, but how do I include the web components .css file?
Thx.
It appears this is not as simple as just the @CssImport for Vaadin 14. The imported css file is not visible to the component.
I then tried all the options at: https://stackoverflow.com/questions/50548806/import-external-stylesheets-in-polymer-3 and couldn't get any to work.
I tried to import bootstrap.css and eventually found granite-bootstrap and the following now works:
import '@granite-elements/granite-bootstrap/granite-bootstrap.js';
class MyComponent extends PolymerElement {
static get template() {
return html`
<style include="granite-bootstrap">
</style>
<div class="container">
<div class="row">
<div class="col-sm">Column 1</div>
<div class="col-sm">Column 2</div>
</div>
</div>
`;
}
If I understand Vaadin 14 correctly, and I hope that I don't, one has to manhandle any vanilla css files you have in your project into some newfangled JsModule in order to use it! I certainly hope there is an easier way of doing this.
PS: So far I have found Vaadin 14 to have too much of a split personality - it can't decide whether is npm+javascript or maven+java, previous bower packaging and polymer 2 templates was far better.
For component scoped CSS you can use the themeFor
attribute of the @CssImport
annotation
--> @CssImport(value = "./styles/custom-textfield.css", themeFor = "vaadin-textfield")
This will have the same impact as wrapping the css code inside <dom-module id="mytextfield" theme-for="vaadin-textfield"><template><style> ... </style></template></dom-module>
html-tags instead of <custom-style><style> ... </style></custom-style>
in Vaadin 10
hope it helps
Hi Kasper,
Thanks for the tip - I missed that part of the documentation. However, I still don't get this to work :-(.
I have created a component called MyComponent into which I want to include bootstrap.css (as a typical example). As I mentioned before, if I include granite-bootstrap it works.
I now tried:
@Tag("my-component")
@NpmPackage(value = "@polymer/paper-input", version = "3.0.2")
@CssImport(value = "./src/bootstrap.css", themeFor = "my-component")
public class MyComponent extends PolymerTemplate<MyComponent.Model> {
...
However this doesn't work. Am I missing something else?
Any updates on this? I also have the exact same problem, and i'm trying what Franz is doing also.
Created a ticket to document this use-case: https://github.com/vaadin/docs/issues/790