forked from cms/tibi-svelte-starter
46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import type { SvelteComponent } from "svelte"
|
|
|
|
function getRenderedElement(
|
|
component: typeof SvelteComponent,
|
|
options?: { props: { [key: string]: any }; addCss?: string[] },
|
|
nestedElements?: { tagName: string; className?: string }[]
|
|
) {
|
|
const el = document.createElement("div")
|
|
el.attachShadow({ mode: "open" })
|
|
|
|
const body = document.createElement("body")
|
|
|
|
// build nested divs with css classes
|
|
let target: HTMLElement = body
|
|
nestedElements?.forEach((e) => {
|
|
const newElement = document.createElement(e.tagName)
|
|
if (e.className) {
|
|
newElement.className = e.className
|
|
}
|
|
target.appendChild(newElement)
|
|
target = newElement
|
|
})
|
|
|
|
el.shadowRoot.appendChild(body)
|
|
|
|
options?.addCss?.forEach((css) => {
|
|
const link = document.createElement("link")
|
|
link.rel = "stylesheet"
|
|
link.href = css
|
|
link.type = "text/css"
|
|
el.shadowRoot.appendChild(link)
|
|
})
|
|
|
|
new component({
|
|
target: target,
|
|
props: options?.props,
|
|
})
|
|
|
|
return el
|
|
}
|
|
|
|
export {
|
|
getRenderedElement,
|
|
// pass also required svelte components here
|
|
}
|