我们如何检测影子根是使用 v0 还是 v1 API 创建的？

假设一个 JS 模块导出shadowRoot这是用以下任一方法创建的el.createShadowRoot or el.attachShadow（我们不知道是哪个）。我们如何检测根是 v0 影子根还是 v1 影子根（即我们如何检测使用哪种方法来创建根）？

例如，我将在以下条件语句中填写什么？

// for argument's sake, we don't create the root, we only get a reference
// to it:
import shadowRoot from 'somewhere'

function getShadowRootVersion(root) {
    if ( ... )
        return 'v0'

    if ( ... )
        return 'v1'
}

console.log(getShadowRootVersion(shadowRoot)) // should output "v0" or "v1".

更多信息：

我们想查明影子根是否是从以下位置创建的createShadowRoot或来自attachShadow。产生的根是不同的：在用创建的根中createShadowRoot, <content>elements 用于分配元素。在创建的根中attachShadow, <content>元素不执行任何操作，并且<slot>而是使用元素。我们如何检测使用哪种方法来创建根（即我们是否有 v0 根或 v1 根）？

我采取了与伊藤隼人的回答类似的方向。然而，而不是创建slot元素，我的目标content元素。我无法找到一种方法来检测任何 API 方法检测的版本。

我瞄准了content元素，因为内容元素本身没有事件，这与slotchange on the slot事件，这有望带来性能的小幅提升。再加上函数的返回值v1如果浏览器不支持的话速度会快一点v0 at all.

function shadowType(shadowRoot) {
    if (!shadowRoot) {
        // closed shadow dom does not appear to have a shadowRoot...
        // It could be assumed that it is v1, but for now return undefined
        return;
    }

    const content = document.createElement('content');
    // In browsers that support v1, but not v0 (ex: Safari)
    if (!content.getDistributedNodes) {
        return 'v1';
    }

    content.setAttribute('select', 'test-shadow-dom-version');
    shadowRoot.appendChild(content);

    const testElement = document.createElement('test-shadow-dom-version');
    shadowRoot.host.appendChild(testElement);
    const type = (content.getDistributedNodes().length) ? 'v0' : 'v1';
    shadowRoot.removeChild(content);
    shadowRoot.host.removeChild(testElement);

    return type;
}

这绝对感觉像是一个“黑客”，因为需要附加随机 dom :(。我确实在 Chrome、Firefox、Safari、IE11 和 Edge 中测试了这一点。我测试了使用 webcomponentsjs (v0) polyfill 制作的组件，并且它是正确的回v0对于每个组件。我还使用 shadydom (v1) polyfill 以及使用 v1 规范创建的组件测试了这些相同的浏览器，并收到了v1在所有这些浏览器中。