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.

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