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

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.

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.

Great, thank you!

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?

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

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.

Please add ability to create amp-analytics, it would help a lot.

I would need to add amp-ad dinamically

Please add amp-consent to allow loading of cmp layers.

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?

Were you able to do it? I'm also looking for a way to dynamically assign src of amp-iframe.

I tried to add images with a lightbox using amp-script, but the lightbox does not work: #27808 I think this is an important feature.
It turns out that I can't add images to the lightbox gallery right now.

Need the ability to create amp-script at run time for analytics to dynamically add the src value for amp-script tags.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

Navigation Menu

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

What's the issue?

How do we reproduce the issue?

What browsers are affected?

Which AMP version is affected?

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

What's the issue?

How do we reproduce the issue?

What browsers are affected?

Which AMP version is affected?

Activity

dreamofabear commented on Nov 18, 2019

mwiley commented on Nov 26, 2019

nurulhudaapon commented on Dec 7, 2019

massawho commented on Dec 27, 2019

brycesteinhoff commented on Jan 6, 2020

PratkinV commented on Mar 5, 2020

akira28 commented on May 4, 2020

c0un7-z3r0 commented on Aug 20, 2020

rafaelmuttoni commented on Oct 8, 2020

alexandr-kazakov commented on Feb 19, 2021

vivekn-procentris commented on Jul 22, 2021

stale commented on Oct 19, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions