Prepend and other html manipulations

[dy]

How to prepend some content?

As a modifier
$`<aspect sel="some-selector" prepend=${content}/>` -adds functional-ish aspect -not-position-based

As a content placeholder
$`<aspect sel=".some-selector">${content}<parentNode.children></>` - prop access in tagname

Direct way
$`<aspect sel=".some-selector">${content}${el => el.childNodes}</>` - breaks html

HTML-way
<aspect sel=".some-selector"><i></i><slot children/></aspect> + logically meaningful slot application

[dy]

The question of adding content is relevant, see https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML.
There are 4 ways we may want to insert the html:

html('#el:beforebegin', code)
html('#el:afterbegin', code)
html('#el:beforeend', code)
html('#el:afterend', code)

but these aren't much useful for non-selector element, or that will be a shallow pseudo html(':beforebegin', code). In fact, these pseudos are redundant, it's enough to have just two: before and after. But - besides - that is too custom selector. Also - unclear how to order children.
Should be hooks-like well-established mechanism.

[dy]

! it must be as natural and full-featured as reducers. How?!
{a: 1, b: 2, c, children: {x}, parent, ...rest} === <a=1 b=2 c ...rest><x></a>
[{a}, {b}, {c}, ...rest] === <a><b><c><...rest>?

// rough doodle
state => {a: 1, ...state}
state => <a=1 ...state/>
[a, b, c] === <><a><b><c></>

<...rest> is possible only for main-aspect elements to define spread of main reality aspect. But in fact that is <children=...elements>-like. So.

What's the name of rest spread for html elements?
. Fragment === collection of elements. Array === collection of elements.

wrapping: <div><...></div>
prepending: <div/><...>
appending: <...><div>

That is INCREDIBLY elegant, very similar to react's fragment tag.

How to pick nodes from html by name / index?

// insert element by the placeholder like that.
<div><#abc><x><...></div>

OMG. That is rediscovery. HMTL reducers.

[dy]

Noble. Good.