HTML 模板阴影 DOM 未在 Handlebars 模板中呈现

HTML Template Shadow DOM not rendering within Handlebars template

我里面有一个Handlebars.js template with a HTML template to create Declarative Shadow DOM(实际情况下内容较多,需要):

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

出于某些奇怪的原因,它不会在最新的 Chrome (v91) 或 Firefox 中使用 jQuery(v3.5.x 或最新的 3.6.x)呈现(v89):

<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,js,output

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

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

已解决问题:加载文档时会处理并附加声明性影子 DOM。它不适用于 post-load 脚本生成的内容,例如 Handlebars.js 模板,必须使用 polyfill.

附加 Shadow DOM