I haven’t seen an official port of opencv to web assembly. See OpenCv + Web Assembly + Next.js + React here for someone working on it. I cannot speak to how well that particular effort is integrated into the wider community. And I may well have just missed an announcement of something along these lines being ready.
Besides, last I knew that wasn’t how installations on JupyterLite are performed. You’ll want to read more about using it. Please see the documentation and examples launched from there. Especially pay close attention to notes about it being experimental and beta, unofficial status as noted here and here.
For example, the following illustrates how a typical pip installation is done on JupyterLite (note even this changes frequently in the last few months & so if you are reading this after it was written, look around at newer working examples before assuming it is current):
import piplite
await piplite.install(['ipycytoscape', 'pandas', 'networkx'])
piplite is a wrapper around micropip, and so you’ll also see things like import micropip followed by await micropip.install("sqlite-utils").
Please see here, here, here, here, here, here for other current issues it may help you to be aware of in working with JupyterLite at this time ( there are current efforts to iron out a lot of these issues ongoing).
The second approach you listed is the best way to execute installations now in a fully-Python backed kernel, like you’d get from going here and clicking ‘launch binder’. However, last time I was using it on MyBinder, I needed the ‘headless’ version for remote systems. I don’t know if that has changed. Therefore, the following:
%pip install opencv-python-headless
You can go here and click 'launch binder' to get a session where opencv is already installed and import cv2 already works.