HTML 模板 Shadow DOM 未在 Handlebars 模板中呈现

问题描述

我有一个带有 HTML 模板的 Handlebars.js 模板，用于在内部创建 Declarative Shadow DOM（由于实际情况下内容较大，因此需要）：

<script id="templatePreview" type="text/x-handlebars-template">
  <ul>
  {{#.}}
    <li>
      <template shadowroot="open">
        {{name}}
      </template>
    </li>
  {{/.}}
  </ul>
</script>

出于某种奇怪的原因，它在最新的 Chrome (v91) 或 Firefox (v89) 中无法使用 jQuery（v3.5.x 或最新的 3.6.x）进行渲染：

<script>
const data = [{
    name: "John"
  },{
    name: "Peter"
  },{
    name: "Mark"
  },];

$(function() {
  let templatePreview = Handlebars.compile($('#templatePreview').html());

  $("#main").append(templatePreview(data));
});
</script>

这是一个测试 JS bin：https://jsbin.com/bocenoqovi/edit?html,output

Chrome DevTools 控制台显示以下消息，但我不确定如何解决此问题：

Found declarative shadowroot attribute on a template,but declarative Shadow DOM has not been enabled by includeShadowRoots.

解决方法

找出问题：在加载文档时处理并附加声明性 Shadow DOM。它不适用于加载后脚本生成的内容，例如 Handlebars.js 模板，必须使用 polyfill 附加 Shadow DOM。