dv.taskList in a container

[oashour]

With dv.el, you can do something like this to put it in a callout (or any other container/element, I'm not sure about the correct terminology-- I'm new to JS)

// makeCallout sets up a callout using obsidian's createEl
let root = this.container;
let callout = makeCallout(root, "Callout Title", ...)

// Works!!! Bold text sits inside the callout
dv.el("b", "This text comes from dv.el", {container: callout});

But this doesn't work:

// Doesn't work, sits outside the callout :(
const tasks = dv.current().file.tasks;
dv.taskList(tasks, {container: callout});

Is there a way to put a dv.taskList inside a callout or some other container?

Unnecessary background

I'm writing some code to pull all the tasks from a note and divide them into callouts by tag. The problem is that I'll need at least 2 or 3 levels of callouts within each other, and I don't know the tags a priori so I can't just put a bunch of dataviewjs blocks inside multiple callouts.

The code will also eventually need to do some more complex processing so I'd just like to have a dataviewjs block in my template that calls dv.view and that's it without any extra manual callout setup. I already have this more or less accomplished using dv.markdownTaskList in raw markdown but I lose all the nice features of the standard dv.taskList (linking, being able to complete tasks, etc.)

[arsham]

Here is a bit of hack that works:

displayTasks(header, tasks) {
    // The p element with the style is a hack to force showing the collapse
    // buttons.
    header = ">" + header + "\n><p style='height:0px; padding: 0px; margin: 0px;'>";
    const id = (Math.random() + 1).toString(36).substring(14);
    const target = `span.dataview.arsham${id} span div.callout`;
    dv.span(header, { cls: `dataview arsham${id}` });
    const div = document.querySelectorAll(target + " div.callout-content")[0];
    dv.api.taskList(tasks, false, div, dv.component);
}

Use it like this:

displayTasks("[!EXAMPLE]+ Upcoming 🎯", tasks);

Notes

1. The id should be unique! Hopefully the randomiser in the code helps.
2. The tasks object is the normal dv.pages('').file.tasks.