Calling Imperative APIs in a Dojo Widget

[devpaul]

Multimedia HTML elements and Web Components often have imperative APIs that relate to the behavior of an element; i.e. play() on an <audio> element or focus() on most elements. What is the recommended way for a Dojo widget to call imperative APIs on DOM elements?

[matt-gadd]

Because calling dom api's isn't particularly nice reactively, for some special common cases like focus() we introduced a reactive property which works well (https://github.com/dojo/framework/blob/master/src/widget-core/README.md#handling-focus). For others you can use the dom() (https://github.com/dojo/framework/blob/master/src/widget-core/README.md#inserting-dom-nodes-into-the-vdom-tree) pragma in @dojo/framework-widget-core/d and then you have full access to the dom node to do whatever you want.

[devpaul]

Is it viable for a user to create a custom Meta for accessing imperative APIs in a reactive way?

class AudioMeta extends Base {
    play(key: string) {
        const node = this.getNode(key);
        node & node.play & node.play();
    }
}

[matt-gadd]

@devpaul absolutely, although that example still really isn't reactive. If you want to see how an imperative api could be done, take a look at the WebAnimation meta (https://github.com/dojo/framework/blob/master/src/widget-core/meta/WebAnimation.ts)