template.content何时会返回null？求具体示例

注：我曾在WHATWG仓库中提出此问题，但该议题几乎立即被关闭，理由是“这类问题更适合在Stack Overflow（SO）上提问”。

WHATWG规范中关于<template>的.content获取器说明如下：

content获取器的执行步骤为：若模板的模板内容不是ShadowRoot节点，则返回该模板内容；否则返回null。

我们可以很容易获取到非null的值：

let template = document.createElement("template");
console.log(template.content); // #document-fragment

但我找不到template.content返回null的示例，能否有人提供这样的示例？

实现示例 #

你可以通过HTMLTemplateElement.setHTML()方法，配合shadowRootMode选项达成这个效果。当指定该选项为"open"或"closed"时，模板的内部内容会被创建为ShadowRoot，此时访问.content就会返回null。

代码示例：

const template = document.createElement("template");
// 传入shadowRootMode选项，将模板内容转为ShadowRoot
await template.setHTML(`<p>ShadowRoot 内部内容</p>`, { shadowRootMode: "open" });

console.log(template.content); // 输出 null
// 访问ShadowRoot内容需要用template.shadowRoot
console.log(template.shadowRoot.innerHTML); // 输出 <p>ShadowRoot 内部内容</p>

原理：按照规范定义，当模板的“模板内容”是ShadowRoot类型时，.content属性会返回null，此时ShadowRoot实例可以通过template.shadowRoot属性直接访问。

内容的提问来源于stack exchange，提问作者MaximPro