Question about components (not web components)

I have recently been approaching the lib coming from vdom based libs.

I see I can simply declare components like

const li = v => html`<li class="test">${v}</li>`

const ul = list => html`<ul class="test">${list.map(li)}</ul>`

Is there a way to attache an event listerner to a component (the result of the function) and be able intercept only events from that component? Try to explain the API I would like to obtain

const isolate =  component => {
   //...
   return {
       component: ...,
       on: selector => event => callback => {
         // .... return unsubsribe
         }
   }
}

const LI = v => html`<li class="test">${v}</li>`

const UL = list => html`<ul class="test"><li>ADD</li>${list.map(isolate(LI))}</ul>`

const {ul, on} = isolate(UL)

on('li')('click')(console.log)

Then the delegate (on the UL? and if I have other siblings?) would act on events on the first

but not on other because owned by different components.

Any suggestion on how to obtain something similar? I think I can hack the template strings and add ref=“” to root elements to react to element creations and mark root elements of components in some way. Or there are better solutions?

[WebReflection]

then I believe custom elements are the primitive you’re looking for … see uce, ube, or p-cool elements

[FbN]

Thank you I will give a look, so many projects. Sorry I found only now the discussion thread (https://github.com/WebReflection/discussions/discussions) that would be a better place to ask than this issue. I’ll close it and open a discussion if I have other questions. Thank you very much for your support.