🧱 Embedding HTML in WBC-Routes2 Routes

WBC-Routes2 makes embedding HTML content effortless — no extra component imports or wrappers needed. Whether it’s a block of semantic content, inline styling, or UI fragments, WBC takes care of rendering it inside Vue routes.

---

🔹 Basic Static HTML Injection

You can use plain HTML strings directly in the route's item array.

{
  path: "/static-html",
  name: "StaticHTML",
  component: WBC,
  props: {
    item: [
      "<h2>Welcome to the Static HTML Page</h2>",
      "<p>This content was defined directly inside the route definition.</p>",
      "<div class='info-box'>HTML + WBC = ❤️</div>"
    ]
  }
}

This is ideal for short notice content, announcements, or UI overlays.

---

🔸 Using HTML with Component Options

You can specify comp: 'div' or any valid element and use the options.html field.

{
  path: "/html-block",
  name: "HTMLBlock",
  component: WBC,
  props: {
    item: {
      comp: "div",
      options: {
        class: "pa-5 grey lighten-3",
        html: "<h3>Block Content</h3><p>This is injected via component options.</p>"
      }
    }
  }
}

This gives you more control and supports props like class, style, events, and more.

---

🌈 Styled HTML Elements with WBHtml Syntax

You can also use WBHtml-style shortcuts:

[
  "div__Welcome to WBC-Routes2!|green text-white",
  "li__Step 1: Add your route|blue",
  "li__Step 2: Embed content|orange",
  "li__Step 3: Launch your app 🚀|teal"
]

Each string is parsed and styled based on the pipe-split syntax.

---

🌐 Loading HTML from Remote Source

Combine HTML and remote loading like this:

{
  path: "/remote-html",
  name: "RemoteHTML",
  component: WBC,
  props: {
    item: {
      comp: "div",
      options: {
        src: "https://example.com/snippets/promo.html",
        class: "pa-5 border shadow-sm"
      }
    }
  }
}

WBC fetches the content and places it inside a div component.

---

🎛️ Dynamic HTML with Event Bindings

Using dive: true, you can attach interactivity:

{
  path: "/interactive-html",
  name: "InteractiveHTML",
  component: WBC,
  props: {
    item: {
      dive: true,
      comp: "div",
      options: {
        html: "<button class='btn' id='my-btn'>Click me</button>",
        on: {
          click: (that) => () => {
            alert('Button clicked inside HTML block!');
          }
        }
      }
    }
  }
}

This turns plain HTML into an interactive Vue-managed component.

---

🧩 Complex Nested Layout

Use multiple HTML components with Vue-like structure:

{
  path: "/html-layout",
  name: "HTMLLayout",
  component: WBC,
  props: {
    item: [
      { comp: "div", options: { html: "<h2>Header</h2>", class: "header" }},
      { comp: "section", options: { html: "<p>Section content goes here...</p>", class: "section-body" }},
      { comp: "footer", options: { html: "<p>Footer content</p>", class: "footer grey--text" }}
    ]
  }
}

Each piece is rendered as a structured VueDOM node, supporting modular layout creation.

---

🧠 Best Practices

Case	Recommendation
Small inline snippets	Use plain HTML strings
Large HTML blocks	Use comp: 'div' + options.html
Style + Behavior	Use dive: true with on handlers
External HTML content	Use options.src (supports CORS)
Maintainable layout	Use array of structured components