data-html

Overview

data-html renders HTML content inside an element. Unlike data-text, it interprets the value as HTML, allowing rich formatted content.

When to use:

• Display rich text content from CMS or API
• Render markdown-converted HTML
• Show formatted descriptions or articles

Why use it:

• ✅ Renders HTML markup properly
• ✅ Built-in sanitization for security
• ✅ Reactive updates when data changes
• ✅ Processes nested directives after rendering

Basic Usage

Simple HTML Binding

<div data-html="content"></div>

With data:

{ content: "<strong>Bold</strong> and <em>italic</em> text" }

Output:

<div><strong>Bold</strong> and <em>italic</em> text</div>

From API Response

<article data-html="article.body"></article>

Syntax

<element data-html="expression">

Features

1. Rich Content Display

<div class="content" data-html="post.content"></div>

With data:

{
  post: {
    content: `
      <h2>Welcome</h2>
      <p>This is a <strong>formatted</strong> paragraph.</p>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    `
  }
}

2. Nested Directives Support

HTML content can include other data directives:

<div data-html="template"></div>

With data:

{
  template: '<span data-text="user.name"></span>',
  user: { name: "John" }
}

The nested data-text will be processed after rendering.

3. Sanitization

By default, dangerous content is sanitized:

// Dangerous script - will be removed
{ content: "<script>alert('xss')</script><p>Safe content</p>" }

// Output: <p>Safe content</p>

4. Allowed Tags

TemplateManager allows these HTML tags:

Advanced Examples

Blog Post Display

<article class="blog-post">
  <header>
    <h1 data-text="post.title"></h1>
    <time data-text="post.publishedAt | date:'D MMMM YYYY'"></time>
  </header>

  <div class="content" data-html="post.body"></div>

  <footer>
    <span>By: </span>
    <span data-text="post.author.name"></span>
  </footer>
</article>

Product Description

<div class="product-description">
  <h3>Description</h3>
  <div data-html="product.description"></div>

  <h3>Features</h3>
  <div data-html="product.features"></div>
</div>

User-Generated Content

<div class="comment">
  <div class="author" data-text="comment.author"></div>
  <div class="body" data-html="comment.content"></div>
  <time data-text="comment.date | date:'relative'"></time>
</div>

With Conditional Display

<div class="article">
  <div data-if="article.hasExcerpt" data-html="article.excerpt"></div>
  <div data-if="!article.hasExcerpt" data-html="article.fullContent"></div>
</div>

API Reference

Expression Syntax

Security Configuration

TemplateManager security config:

TemplateManager.config.security = {
  sanitize: true,           // Enable sanitization
  validateMarkup: true,     // Validate HTML structure
  allowedTags: [...],       // Whitelist of allowed tags
  allowedAttributes: {...}  // Whitelist of allowed attributes
}

Common Pitfalls

⚠️ 1. Don't Use for Plain Text

<!-- ❌ Overkill for plain text -->
<span data-html="user.name"></span>

<!-- ✅ Use data-text for plain text -->
<span data-text="user.name"></span>

⚠️ 2. XSS Vulnerabilities

// ❌ Never trust user input without sanitization
const userInput = '<script>stealCookies()</script>';

// ✅ TemplateManager sanitizes by default
// But still validate on the server side!

⚠️ 3. Performance with Large Content

<!-- ❌ May be slow with very large HTML -->
<div data-html="massiveContent"></div>

<!-- ✅ Consider pagination or lazy loading -->
<div data-html="currentPageContent"></div>

⚠️ 4. Nested Script Tags

<!-- ❌ Script tags are removed for security -->
<div data-html="'<script>init()</script>'"></div>

<!-- ✅ Use data-script for initialization -->
<div data-script="init"></div>

Comparison: data-text vs data-html

Related Directives

• data-text - For plain text display
• data-if - For conditional rendering
• data-for - For list iteration