Enable Annotator JS V2 only in some html elements

Question

I'm trying to enable Annotator Js V2.0 only in some html elements and not the whole document without success. The documentation describes that a parameter can be passed as an option to define:

the DOM element to which event listeners are bound. Defaults to document.body, allowing annotation of the whole document.

So below is the code referred in the docs:

var app = new annotator.App();
app.include(annotator.ui.main, {element: document.body});
app.start();

I'm trying to define another html element by class name doing for example:

var app = new annotator.App();
app.include(annotator.ui.main, {element: '.class-name'});
app.start();

This is not working though. Can you advise on the appropriate way to do this?

Answer 1

I know its terribly late but hoping might help someone. :) Please use document.querySelector as shown below.

element: document.querySelector('.class-name')