Overview

Bidirectional interoperation has two parts:

1. amp-script can define custom actions and other elements can call them.
2. amp-script can call actions on other elements.

(1) Actions calling into amp-script

It'd be great if amp-script had the ability to define custom actions. The advantages are:

• less need to wrap everything with an amp-script element as components outside the amp-script element can still trigger functionality implemented in amp-script.
• better operability with existing AMP components
• less cases were amp-bind is needed

For example:

<amp-script id="data" actions="fetch, update">
</amp-script>

<button on="tap:data.fetch">Click</button>

Inside the script you could implement a handler:

AMP.addEventListener('fetch', () => { // do stuff })
AMP.addEventListener('update', (data) => { AMP.setState({result: update(data) })

Alternative

The same thing could be accomplished with AMP.setState(...) and a counter:

<button on="tap:AMP.setState({fetch: fetch + 1})">Click</button>

where the amp-script listens to state changes to the fetch variable. However, this is hacky and always requires using amp-bind.

(2) amp-script calling actions on other elements

It'd be useful to be able to trigger AMP Actions from within an amp-script. Use cases would be:

• open an amp-lightbox from a script
• submit a form from a script
• trigger closeOrNavigateTo or navigateTo actions from a script

A positive side-effect would be that scripts can target elements outside the amp-script element's scope.