Prepend and other html manipulations about spect

[dy]

That doesn't seem very much profitable for now defining aspects in html: that is part of hyperspect, and in a way similar to custom elements, we can define them as

defineAspect('name', function (el) {})

$`<div name=${props}>
</div>`

quite weird that we pass props directly to aspect, but they're assigned to element. What about name clash etc?

h`<div ${el => {}}></div>` - that's fine and logical, aspect takes single element, but
h`<div ${el => {}}=${props}></div>` - here it's weird to assign props to element. In fact, that's not the same as h`<div x=${props}/>` - here `x` is assigned to element, which is fine, but with anonymous aspect there's no props. We could pass props as a second argument as
h`<div ${(el, props) => {}}=${props}></div>`, but that would break function convention and be just wrong. Better h`<div ${el => { /* You have props here anyways */ }}></div>`

[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.