Add <template> support for bento-date-display and bento-date-countdown components
#37146
Conversation
dmanek
changed the title
bento-date-display and bento-date-countdown components
| */ | ||
| export function getTemplateElement(element) { | ||
| return element.hasAttribute('template') | ||
| ? element.ownerDocument.getElementById(element.getAttribute('template')) |
There was a problem hiding this comment.
Should we verify that this is actually a <template>? Eg, doing a querySelector(`template#${getAttribute('template')}`)
| let templateStr = ''; | ||
| // `template.content` returns a Document Fragment, so iterate over it's | ||
| // children to return as a string. | ||
| for (let i = 0; i < template.content.children.length; i++) { |
There was a problem hiding this comment.
Store children as a local to prevent needless JS -> C++ boundary transitions.
| const variables = getVariablesAsString(data); | ||
| const templateContents = getTemplateContentsAsString(template); | ||
| return new Function( | ||
| `${variables} return \`${escapeBackticks(templateContents)}\`;` |
There was a problem hiding this comment.
This is essentially eval, which means it can never work when served via Cache (or on any publisher with a decent CSP). This needs to be discussed in design review, because we can't allow this current solution.
| <h1>Date Countdown</h1> | ||
| <bento-date-countdown id="one" timeleft-ms="0"> | ||
| <template> | ||
| <p>{"d":"${d}","dd":"${dd}","h":"${h}","hh":"${hh}","m":"${m}","mm":"${mm}","s":"${s}","ss":"${ss}"}</p> |
There was a problem hiding this comment.
The reason you had to wrap this in <p> tags is because you used children instead of childNodes in the template helpers.
| import {BentoDateCountdown} from './component'; | ||
|
|
||
| export class BaseElement extends PreactBaseElement {} | ||
| export class BaseElement extends PreactBaseElement { |
There was a problem hiding this comment.
We need to sanitize the result on the AMP layer. In the meantime, it's okay if you disable the feature on AMP to submit this PR.
Support
<template>as an alternative to mustache templates to render user customizedbento-date-display&bento-date-countdown.Fixes #36619