Is it possible to render AMP components from JSON inside of amp-list?

Question

I am working on creating an ASP.NET MVC application to transform content from a content management system and render it as an AMP-compliant page. The CMS has a concept called lists, which groups together content items of a particular template, each which can have custom fields of different types (plain text, boolean, HTML, etc.).

The amp-list component allows you to render raw HTML by using triple curly braces rather than double, for example {{{htmlProperty}}}. This works in general, but I'm running into an issue with it stripping out images, even if I modify them server-side to use proper amp-img syntax.

I have the following amp-list component:

<amp-list layout="fixed-height" height="500" src="https://jsonblob.com/api/jsonBlob/56eb207e-e2c3-11e8-a8cb-676415a24d50" single-item>
    <template type="amp-mustache">
        {{#contentItems}}
        <section>
            <header>
                {{title}}
            </header>
            <div>
                {{{content}}}
            </div>
        </section>
        {{/contentItems}}
    </template>
</amp-list>

I have the following sample JSON:

{
  "totalRecords": 2,
  "pageSize": 0,
  "pageNumber": 1,
  "items": {
    "contentItems": [
      {
        "row": 1,
        "title": "What is your favorite sport?",
        "content": "<p><strong>Hockey</strong></p>"
      },
      {
        "row": 2,
        "title": "What is your favorite country?",
        "content": "<p>Canada</p><amp-img src=\"http://www.flagblvd.com/wp-content/uploads/2015/09/canadian-flag-medium.png\" alt=\"\" layout=\"fill\"></amp-img>"
      }
    ]
  }
}

Note that the title property is plain text while content is HTML. When the page is loaded, the bold from the <strong> tag in the first content item works, but you'll notice the amp-img is omitted from the output if you inspect in your browser's developer console. Please see this jsfiddle for a demonstration.

Is there any way to get this to work properly? I didn't see anything about this in the official documentation. I only even found out about using the triple braces to render raw HTML by seeing it used in an example with no corresponding documentation.

Answer 1

The output of "triple-mustache" is sanitized to only allow the following tags: a, b,br, caption, colgroup, code, del, div, em, i, ins, li, mark, ol, p, q, s, small, span, strong, sub, sup, table, tbody, time, td, th, thead, tfoot, tr, u, ul.

For More Information