ampproject / ampproject/amphtml
amp-script: Support creating all AMP elements e.g. amp-date-countdown
- 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
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