[SOLVED] Is src attribute allowed in amp-state

Is src attribute allowed in amp-state

Im trying to fill AMP state with data from the API, for AMP email. We need data to be provided from the API, as the it can dynamically change in the meantime.

According to the AMP4email documentation, state can be filled either from a child <script> element OR a src attribute containing a CORS URL to a remote JSON endpoint, but not both.

In reality, adding src to the amp-state will throw the following validation error: The attribute 'src' may not appear in tag 'amp-state (AMP4EMAIL)' in the AMP playground

You can test it out by copying the following code to the playground.

<!doctype html>
<html ⚡4email>
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
    <style amp4email-boilerplate>body{visibility:hidden}</style>
  </head>
  <body>

    <amp-state id="fruits" src="https://amp.dev/static/samples/json/related_products.json"></amp-state>
  </body>
</html>

Is this a problem with the official validator, or with the documentation?

Solution

The src attribute is currently not supported in <amp-state> for emails. From AMP for Email Supported Components:

<amp-state> is used to define the initial state used by amp-bind.

Note: The src attribute is not currently supported.

To achieve what you want, you could use <amp-list> to pull data from your server on load.

Edit: I opened an issue to track updating the component documentation.