Question about components (not web components) about uhtml HOT 12 CLOSED

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

from uhtml.

if you come from vdom ... maybe you come from P/React and/or hooks? In that case, have you checked uland ?

from uhtml.

Thank you for the quick reply. I Looked at uland but I dont want to use on* events directly as attribute on elements. With ref= is possible to know when an element is created and attached to DOM. Is there a way to know when an element is removed from the DOM? If yes I think I can build the API as above

from uhtml.

how did you hook into elements lifecycle before? nothing really different here ... but curious to know ... anyway, MutationObserver is there to help out with connected/disconnected things, but it requires your own integration here

from uhtml.

from uhtml.

I see ... well, I have an alternative here: https://github.com/WebReflection/lighterhtml-plus#lighterhtml-plus

maybe one day I'll have the same in uhtml too ... the thing is, when those events matter, I usually go for Custom Elements right away, either builtin extend or regular

from uhtml.

I realized that ref=${callback} the callback is called with the element but befor it is attached to the DOM (when it's still resident on the document fragment). So I cannot access the node parent using ref=. Is it the desired behaviour?

from uhtml.

Yes, because none of the things you are doing are documented as such for ref ... connected and disconnected are a different beast, but you can use ref to hook your node into that loop, still I don't know why you need it so desperately

from uhtml.

I want to attach a event listener to the parent of an html<><><><> result to capture events coming from the generated node in a programmatic way (to construct isolated components). This without any explict attribute wrote directly on html code or visible custom elements.

Something like

html`<div >${onButtonClick(callback)(html`<button  /><button /><button />`)}</div>`

from uhtml.

you can do that via <div onclick=${callback}> ... not sure why you are trying to avoid what's uhtml all about 🤔

or use custom elements instead, so you have all connected/disconnected you

from uhtml.

from uhtml.

from uhtml.