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

Question

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

f.e.，我将在以下条件语句中填写什么？

// 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> 元素用于分配元素。在使用attachShadow 创建的根中，<content> 元素不做任何事情，而是使用<slot> 元素。我们如何检测使用哪种方法来创建根（即我们是有 v0 根还是 v1 根）？

Answer 1

我的方向与 Hayato Ito 的回答类似。但是，我没有创建slot 元素，而是以content 元素为目标。我无法找到一种方法来检测任何 API 方法检测的版本。

我将content 元素作为目标，因为内容元素本身并没有针对它们的事件，这与slot 事件中的slotchange 不同，这有望带来小的性能提升。另外，如果浏览器根本不支持v0，函数返回v1 的速度会更快。

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。

Answer 2

以下 hack 应该可以工作：

function isV1(shadowRoot) {
  const slot = document.createElement('slot');
  shadowRoot.appendChild(slot);
  slot.appendChild(document.createElement('div'));
  const assignedNodes = slot.assignedNodes({ flatten: true });
  slot.remove();
  return assignedNodes.length !== 0;
}

IMO，当你必须检测它时有问题。