@eriksyuan/innerhtml v1.0.4

!! deprecated!! plase use @eriksyuan/vc-html

InnerHtml

Install

npm install @eriksyuan/innerHtml

Usage

<script setup>
import InnerHtml from '@eriksyuan/innerHtml'
const html = '<div>hello world</div>'
</script>

<template>
  <InnerHtml :nodes="html" />
</template>

Example

SFC Playground

demo

<script setup>
import InnerHtml from '@eriksyuan/innerHtml'
const html = `
<div>
    <ul>
        <li id="main">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
<div>hello world</div>`
</script>

<template>
  <InnerHtml :nodes="html">
    <template #li="{ node, render, childrenRender }">
      <template v-if="node.props.id === 'main'">
        <component :is="render" />
      </template>
      <li v-else>
        <component :is="childrenRender" />0
      </li>
    </template>
  </InnerHtml>
</template>

results

<div>
    <ul>
        <li id="main">1</li>
        <li>20</li>
        <li>30</li>
        <li>40</li> 
        <li>50</li>
    </ul>
</div>

Props

Slots