Rendering HTML

Please note: All the contents of this section will only work on the mini program side.

Taro can render HTML directly via Element#innerHTML or Vue's v-html or React/Nerv's dangerouslySetInnerHTML:

React

function helloWorld() {
  const html = `<h1 style="color: red">Wallace is way taller than other reporters.</h1>`

  return <View dangerouslySetInnerHTML={{ __html: html }}></View>
}

Vue

<template>
  <view v-html="html"></view>
</template>

<script>
export default {
  data () {
    return {
      html: `<h1 style="color: red">Wallace is way taller than other reporters.</h1>`
    }
  }
}
</script>

Custom HTML styles

Setting HTML directly will not make the HTML tags take on the browser's default style, Taro provides two built-in styles that we can introduce directly to take effect.

• @tarojs/taro/html.css: W3C HTML4 built-in styles , Only HTML4 tag style, smaller size, high compatibility, can adapt to most cases.
• @tarojs/taro/html5.css: Chrome(Blink) HTML5 built-in styles, Rich built-in styles, including most HTML5 tags, large size, not necessarily support all mini program containers.

In order for the built-in tag styles to work, we also need to set the CSS class of the HTML container to .taro_html:

React

import '@tarojs/taro/html.css'

function helloWorld() {
  const html = `<h1 style="color: red">Wallace is way taller than other reporters.</h1>`

  return <View className="taro_html" dangerouslySetInnerHTML={{ __html: html }}></View>
}

Vue

<template>
  <view v-html="html" class="taro_html"></view>
</template>

<script>
import '@tarojs/taro/html.css'

export default {
  data () {
    return {
      html: `<h1 style="color: red">Wallace is way taller than other reporters.</h1>`
    }
  }
}
</script>

Likewise, we can write our own CSS styles, and the class names of the HTML tags that Taro renders are consistent with the HTML tag names, for example, if we have a container CSS class named my_css and we want to set the style of the h1 tag, then we do this

.my_css .h1 {
  font-size: 30px;
}

You may prefer the default style of other browsers.

• Firefox
• Internet Explorer
• Safari/Chrome(Webkit)
• Opera
• W3C HTML5 Spec
• normalize.css

HTML Escape

By default, Taro's HTML interface only accepts escaped HTML strings, and we recommend returning the escaped HTML directly on the server side.

• he: Larger size, but more relaxed open source protocol
• entities: Smaller size, but more stringent open source protocol

You may need transformText from [Advanced Options](#Advanced Options) in conjunction with HTML escaping for string rendering.

Binding events

For scoping and security reasons, Taro removes all events and JavaScript from the HTML string. But we still have a way to bind events to HTML:

React

import '@tarojs/taro/html.css'

function helloWorld() {
  const html = `<h1 id="test">Wallace is way taller than other reporters.</h1>`

  useEffect(() => {
    const el = document.getElementById('test')
    function testOnTap (event) {
      // do something
      ...
    }
    el.addEventListener('tap', testOnTap)

    return () => {
      el.removeEventListener('tap', testOnTap)
    }
  }, [])

  return <View className="taro_html" dangerouslySetInnerHTML={{ __html: html }}></View>
}

Vue

<template>
  <view v-html="html" class="taro_html"></view>
</template>

<script>
import '@tarojs/taro/html.css'

export default {
  data () {
    return {
      html: `<h1 id="test">Wallace is way taller than other reporters.</h1>`
    }
  },
  mounted () {
    const el = document.getElementById('test')
    el.addEventListener('tap', this.testOnTap)
  },
  testOnTap (event) {
    // do something
    ...
  },
  beforeDestroy () {
    const el = document.getElementById('test')
    el.removeEventListener('tap', this.testOnTap)
  }
}
</script>

You may need to use transformElement in [Advanced Options](#Advanced Options) if the element to be dynamically bound to the event does not have an ID.

Advanced Options

If the built-in functionality does not meet the needs or the rendering results are not as expected, Taro also provides advanced options for HTML rendering, which can be accessed via Taro.options.html :

import Taro from '@tarojs/taro'

// Do not parse the contents of the souce tag
Taro.options.html.skipElements.add('source')

skipElements

Type: Set<string>

Default Value: new Set(['style', 'script'])

HTML tags contained in the HashSet will not be parsed.

voidElements

Type: Set<string>

Default Value: new Set([ '!doctype', 'area', 'base', 'br', 'col', 'command', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr' ])

HTML tags contained in a HashSet do not require closure tags, such as <img />.

closingElements

Type: Set<string>

Default Value: new Set([ 'html', 'head', 'body', 'p', 'dt', 'dd', 'li', 'option', 'thead', 'th', 'tbody', 'tr', 'td', 'tfoot', 'colgroup' ])

HTML tags contained in a HashSet can be automatically closed and cannot be nested.

transformText

Type: (taroText: TaroText, text: Text) => TaroText

Default Value: void

The first argument to this function takes the value of TaroText, which is processed by Taro by default, the second argument is Text, which is parsed by the HTML parser, and the final TaroText object returned is involved in the rendering of the string in HTML.

transformElement

Type: (taroElement: TaroElement, element: Element) => TaroElement

Default Value: void

The first parameter of this function takes the value of TaroElement processed by Taro by default, the second parameter is the Element parsed by the HTML parser, and the last returned TaroElement object participates in the HTML element rendering.

Example:

// Adding the aotu class to all img tags
Taro.options.html.transformElement = (el) => {
  if (el.nodeName === 'image') {
    el.setAttribute('class', 'aotu')
  }
  return el
}