ampproject / ampproject/amphtml

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

Open
#25,344 12 comments 9 reactions 0 assignees View on GitHub
Component: amp-script Stale Type: Bug WG: runtime
Dominant language
JavaScript
Stars
14.9k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

## 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

```html









Add timer





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>
`
})

```

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.

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the JSBin case with amp-script and amp-date-countdown, then trace where the "Sanitized node" error is emitted when the dynamically created element is assigned through innerHTML. Compare the sanitizer's handling of amp-date-countdown and other AMP elements; done means the countdown is added to the DOM without the error and the reported reproduction works.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.