如何检测是否使用v0或v1 API创建阴影根？

Question

假设一个JS模块导出shadowRoot，它是用el.createShadowRoot或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>元素用于分发元素。在用attachShadow创建的根中，<content>元素什么都不做，而是使用<slot>元素。如何检测用于创建根的方法(即我们是有v0根还是v1根)？

Answer 1

我和伊藤的回答也是一样的。但是，我没有创建slot元素，而是针对content元素。我无法找到一种方法来检测任何API方法检测的版本。

我以content元素为目标，因为内容元素本身并没有为它们设置事件，这与slotchange在slot事件上的情况不同，后者有望带来小的性能提升。此外，如果浏览器根本不支持v1，则函数返回v0的速度要快一些。

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;
}

这绝对是一种“黑客”的感觉，因为需要附加随机的内容：我在Chrome、Firefox、Safari、IE11和Edge上测试了这一点。我测试了使用webcomponentsjs (v0)多边形构建的组件，它正确地返回了每个组件的v0。我还用shadydom ( v1 )用用v1规范创建的组件来测试相同的浏览器，并在所有这些浏览器中接收v1。

Answer 2

以下黑客应该有效：

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;
}

海事组织，当你必须发现它的时候，有什么问题。