javascript - 当innerhtml本身已经动态生成时，如何绑定到html属性？

首先，这是我的index.html：

<template>
    <div class="panel" innerHtml="${renderedPanel}"></div>
</template>

页面呈现后即会生成innerHtml，最终可能是这样的：

<div class="panel au-target" au-target-id="294">
   <div>
      <button class.bind="classList">this is a button</button>
   </div>
   <div>
      <img src="image.png">
   </div>
</div>

现在假设我的脚本中包含以下代码：

public classList = 'btn btn-success';

setTimeout(x => {
   this.classList= 'btn btn-warning';
},5000);

我希望按钮在5秒钟后会改变，但是不会改变。实际上，它甚至没有任何样式，因为它似乎从一开始就无法绑定到classList。Aurelia仅绑定到初始HTML，而不绑定到由我拥有的替换innerHtml的字符串所生成的HTML，如下所示：

this.renderedPainel = this.renderedPainel.replace('$' + i + '$', '<button class.bind="test">Ok</button>');

额外说明：仅当我正在处理幻灯片放映时才会发生超时，并且我将遍历每个图像替换html中的图像，因此实际上要替换“ class”而不是替换“ class”，而不需要替换图像的“ src”刷新所有其他html，因为我有需要继续播放的视频。$ i $只是我要替换的小部件的索引。

有关如何进行此操作的任何线索？