How to find a Web Component usable with Vaadin

I am pretty confused as to the requirements a web component must fulfill to be used with Vaadin 14+ NPM mode. It appears that some web components do not work, because they are based on Polymer2 instead of 3. I could be mistaken here, there is just not enough documentation out there.

It would be nice if someone could enlighten me as to

  • how to find a web component implementing “some feature” (search with Google or are the specific search sites?)
  • how to check if this web component is usable with Vaadin

For example, I was trying to integrate https://www.webcomponents.org/element/Dabolus/cookie-consent but apparently it has no NPM repo - unusable with Vaadin?
Then I tried another component: https://www.webcomponents.org/element/Scarygami/scary-cookie-consent - but it simply did not show up on the page, where I added it. Maybe it doesn’t fulfill some other criteria needed with Vaadin?

@Tag("scary-cookie-consent")
@JsModule("@scarygami/scary-cookie")
@NpmPackage(value = "@scarygami/scary-cookie", version = "3.0.0")
public class CookieConsent extends Component {
    
}

It would be really nice to have a definite list of “must-haves” for a web component to work with Vaadin. Also, isn’t web components supposed to be an interoperable standard? If there are so many strings attached, then I don’t think it makes much sense for Vaadin to provide first-class support for it (instead of concentrating on supplying a generic, straightforward integration method for external JavaScript libraries).

In Vaadin 14, a javascript library can be downloaded with NPM.
You can also use an external url or download it in your frontend folder (that’s not the method I recommend since it doesn’t download any dependency and you need to upgrade it manually).

So the recommended method is to use a library already in npm.

Another requirement is that all the javascript libraries should work together at the same time.
For example polymer 2 and polymer 3 are not working together. Polymer3 is a requirement for Vaadin 14 (Polymer 2 for compatibility mode).
You may have exactly the same kind of problem with other transitive dependencies for example:

  • webcomponent1 requires vaadin-dialog v1.0.0 and webcomponent2 requires vaadin-dialog v2.0.0

The library https://www.webcomponents.org/element/Scarygami/scary-cookie-consent requires Polymer2 so it won’t work in Vaadin 14.

The npm package @scarygami/scary-cookie is in Polymer3 but it’s a different library (it’s not a cookie-consent).

I think it’s not well explained and unfortunately the vaadin directory doesn’t help. webcomponents.org is not really maintained and I think there is no replacement for it, perhaps someone may have a better answer.

I tried two years ago different cookie consent libraries and I found this library:
https://www.npmjs.com/package/tarteaucitronjs

It has no dependency but it’s not a webcomponent. But it follows the GDPR.

Thanks a lot for your explanations. Seems like webcomponents are pretty much dead as an idea, if there is no interoperability. That was probably planned differently at the time :slight_smile:

Vanilla web components are working well with other components.
It’s also possible to use 2 web components with different libraries (like polymer3 and lit are working perfectly together).
But it’s impossible to use 2 polymer components with different versions of polymer :/.

I don’t know how it will be with the next major version of lit and the current one.

I think it’s better than before (with jquery, …) but it requires some improvements.

How would you go about including a vanilla Javascript library then? Unfortunately I did not find any documentation on this.

Simply using a “@JsModule” and “@NpmPackage” annotation is not enough. It does bring the library into node_modules, but not into the runtime. An additional step (import?) seems to be necessary to make the libs available under Vaadin. Something in Vaadin seems to work differently, because the usual “getting started” docs you’ll find with JavaScript-Libraries often don’t work under Vaadin.

This is crazy. The @JsModule annotation loads the JavaScript, even if the component it is on is never added to the application.

It’s not crazy but it’s quite hard to understand.
This is well explained here: https://mvysny.github.io/Vaadin-difference-jsmodule-javascript/

Unfortunately the script and package I gave you does not work well with webpack and JsModule.
I found something else, but the documentation is not really there.

Here you have a github example of an integration of this javascript library in Vaadin 14:
https://github.com/jcgueriaud1/cookie-consent-for-vaadin

Many thanks for the link to the docs and also the repo - I shall dive into it. But what those docs don’t explain is the situation I alluded to above. So if I have this:

@JsModule("some/module.min.js")
public class MyComponent extends Composite<Div> {

}

But then I never add this component to any view or layout or other component, why is the module.min.js still loaded at runtime? The class MyComponent may be on the classpath, but I would expect it to not process its annotations, if it remains unused.

If the library executes code right after loading, this can lead to dangerous side effects. In my case some Javascript code executed even before I was logged in to my Vaadin application.

It’s loaded in development mode.
In production mode only the components used in the application are loaded.

The javascript files in JsModule are bundled in one big javascript file loaded when you run the Vaadin application.
Some javascript files can run methods during this call (like the cookie consent).

For a webcomponent, the javascript class is defined and added in the customElements “dictionary”, when the html tag of the webcomponent is found, it will load this class.

For a javascript file, you can do the same “thing” (register a function like window.test = …) and run this function when you attach the component like here: https://github.com/jcgueriaud1/amcharts-demo/blob/master/src/main/java/org/vaadin/jeanchristophe/XYChart.java#L29

In my github, you can find a lot of different ways to import/use javascript in Vaadin 14 (here for example: https://github.com/jcgueriaud1/vaadin-tooltip-js). But you won’t find a lot of documentation.

There is also this article that can help you to have a better understanding: https://vaadin.com/learn/tutorials/integrate-jquery-into-vaadin-flow

The javascript packages you can find in npm can be easy or impossible to use in Vaadin.
You can check:
1/ If it’s a webcomponent and does not require an older version of polymer
2/ If not, if you have documentation to use the package with webpack, if not I recommend to not try the library

Also check the dependencies and the size of the library.

I didn’t find a “good” cookie consent component (easy to use and which applies GDPR).
The vaadin-cookie is not free (requires a Pro subscription) and really simple, it doesn’t help that much if you want to apply GDPR. (but it’s easy to use)