Render arguments into existing HTMLElement

[Tim Janik]

I'm looking into applying uhtml in a context similar to Vue, where there is one code entity creating a component:

html`<div> <my-icon id="icon1" fa="warning" onclick=${handler} /> </div>`

And the component itself which also specifies its attributes and internal children:

html`<my-icon internalattrs="..." onenter=${internalhandler}> <implementation-bits /> </my-icon>`

Can the uhtml logic be used in a way, so that when my-icon#icon1 is provided as HTMLElement, the rendering of my-icon in the second fragment will apply to this existing instance (i.e. setting internalattrs and onenter) instead of creating a new one?

So in a way, the attributes from the first and second template literal are merged into a single HTMLElement.

Alternatively, can the attribute apply logic be used in isolation on an existing HTMLElement, e.g. if just the attribute part of the second template string is provided (which could be extracted with moderate effort)? I.e. something like:

render_attrs(existing_element)` internalattrs="..." onenter=${internalhandler} `;

[Andrea Giammarchi]

it looks like you're after Custom Elements, and uce, based on uhtml, gives you exactly that, but if it's Vue you're after, uce-template gives you a Vue 3 like experience, with stand-alone components definable either as template on the page (SSR) or as files a part.