A new way of rendering HTML snippets inside a component

[delapuente]

There are situations in which you want to group a list of content and metadata for parametrizing components:

const features = [
  {
    title: 'More features',
    description: 'Unleash the potential of Quantum Computing...'
  },
  {
    title: 'Faster',
    description: 'Now Qiskit is 10x faster compiling...'
  }
]

Potentially, you would want to include HTML markup for formatting, such as <strong> or <li>:

const features = [
  {
    title: 'More features',
    description: 'Unleash the potential of <strong>Quantum Computing</strong>...'
  },
  {
    title: 'Faster',
    description: 'Now Qiskit is <em>10x</em> faster compiling...'
  }
]

When dealing with the first structure, we can use template interpolation but when dealing with the second, we need to use v-html directive.

The problem with using v-html is the the DOM is not processed by Vue.js and so it can cause unexpected behaviour such as not being scoped for CSS and it is also vunerable to XSS attacks sometimes. It would be better to switch to a component approach but the boilerplate is too high for these simple usages.

This issue is about investigating/inventing a solution for this problem.