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

Question

我有一个Handlebars.js模板，里面有一个HTML模板来创建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，js，输出

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

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

Answer 1

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