Amphtml: amp-script: Support creating all AMP elements e.g. amp-date-countdown

Created on 31 Oct 2019 · 9Comments · Source: ampproject/amphtml

What's the issue?

When trying to add amp-date-countdown dynamically using amp-script, a "Sanitized node" error is printed to the console, and it isn't added to the DOM.

How do we reproduce the issue?

JSBin: https://jsbin.com/tenozoxoko/edit?html,output

<!DOCTYPE html>
<html ⚡>
  <head>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
    <script async custom-element="amp-date-countdown" src="https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js"></script>
  </head>
  <body>
    <amp-script layout="container" script="hello-script" development>
      <button>Add timer</button>
      <div id="timer"></div>
    </amp-script>

    <script id="hello-script" type="text/plain" target="amp-script">
      const btn = document.querySelector('button');
      btn.addEventListener('click', () => {
        const timer = document.getElementById('timer');
        timer.innerHTML = `
          <amp-date-countdown layout="fixed" height="100" width="300" timestamp-seconds="2147483648">
            <template type="amp-mustache">
              {{d}}:{{h}}:{{m}}:{{s}}
            </template>
          </amp-date-countdown>
        `
      })
    </script>
  </body>
</html>

Create a page that uses amp-script, and within the script, dynamically add an amp-date-countdown to the DOM.

What browsers are affected?

All browsers appear to be affected.

Which AMP version is affected?

Version 1910251950120.

amp-script Bug runtime

Source

mwiley

👍4

Most helpful comment

I would need to add amp-ad dinamically

akira28 on 4 May 2020

👍8

All 9 comments

Thanks for filing this issue. Currently, only creating amp-img and amp-layout are supported. This will change in the future, but we'll update the documentation to point this out in the meantime.

choumx on 18 Nov 2019

Great, thank you!

mwiley on 26 Nov 2019

Can we have support for amp-iframe? If not then what would be the best way to dynamically assign src of amp-iframe from script of amp-script?

nurulhudaapon on 7 Dec 2019

👍7

I just needed to created an amp-pixel dynamically and found out that only amp-layout and amp-img is supported. The problem is that for what I need, amp-img would be enough, but I can't generate PAGE_VIEW_ID or RANDOM with it. That would be great if we can support other amp elements

massa1240 on 27 Dec 2019

We also would like to be able to dynamically create amp-iframe from amp-script. We need some programmatic control over which iframe src is loaded.