slots-el

Vue 3 utility. Converts slot VNodes (this.$slots.default()) to a plain HTML string or live DOM Nodes. Use inside child components when you need to inspect, manipulate or forward slot content outside Vue's render pipeline.

import slotsEl from '@pim.sk/utils/slots-el.mjs'

Vue 3 only — requires this.$slots.default() (or slots.default?.() in setup()). The demo below mounts a minimal Vue app for each example.

Usage

slotsEl( vNodes ).html

Converts Vue slot VNodes to a plain HTML string. Use inside a child component when you need the slot content as a string — e.g. for tooltips, dynamic innerHTML or server payloads.

// Child component (receives slot from parent):
setup(_, { slots }) {
    const vNodes = slots.default?.() || []
    const se     = new slotsEl( vNodes )

    se.html   // → HTML string of slot content
}

// Parent template:
// <ChildComponent>
//     <span class="tag is-success">
//         <i class="fa fa-check"></i> Hello slot
//     </span>
// </ChildComponent>

// inside child component setup():
const vNodes = slots.default?.() || []
const se     = new slotsEl( vNodes )

se.html
// → '<span class="tag is-success"><i class="fa fa-check"></i> Hello slot</span>'

slotsEl( vNodes ).node

Returns slot content as an array of live DOM Nodes. Use when you need to insert, inspect or manipulate slot elements directly in the DOM.

setup(_, { slots }) {
    const vNodes = slots.default?.() || []
    const se     = new slotsEl( vNodes )

    se.node   // → [ HTMLElement, HTMLElement, ... ]

    // example: insert nodes into a specific container
    const container = document.querySelector(".my-target")
    se.node.forEach( node => container.appendChild(node) )
}

const vNodes = slots.default?.() || []
const se     = new slotsEl( vNodes )

se.node
// → [ <span class="tag is-warning">…</span>, <span …>…</span> ]
// → Array of live HTMLElement nodes

slotsEl( vNodes ).slots

Returns the internal array of processed slot descriptors. Each item contains type (tag name or symbol), children and html. Useful for inspecting or iterating over slot structure.

se.slots
// → [
//     {
//         type:     "span",
//         children: "Hello",
//         html:     "<span class=\"tag\">Hello</span>",
//     },
//     {
//         type:     Symbol(v-fgt),   // fragment / text node
//         children: " plain text",
//         html:     " plain text",
//     },
// ]

const se = new slotsEl( slots.default?.() || [] )

se.slots.forEach( (s, i) => {
    console.log( i, s.type, s.html )
})

Slot with props — attributes preserved

Props on slot elements (class, id, data-*, style…) are passed through and set as attributes on the generated DOM node. The html output contains the full attribute set.

// Slot element with attributes:
// <button class="button is-small" data-id="42" disabled>Click</button>

se.html
// → '<button class="button is-small" data-id="42" disabled="">Click</button>'

se.node[0].dataset.id   // → "42"
se.node[0].disabled     // → true