我们如何检测是否使用v0或v1 API制作了影子根？ [英] How do we detect if a shadow root was made with v0 or v1 API?

问题描述

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

fe，我将填写以下条件语句？

  //为了参数，我们不创建根，我们只得到一个参考
 //给它：
 import shadowRoot from'somehere'
 
 function getShadowRootVersion（root）{
 if（...）
 return'v0'
 
 if（...）
 return'v1'
} 
 
 console.log（getShadowRootVersion（shadowRoot））//应输出v0或v1。 
  

更多信息：

我们想知道是否从 createShadowRoot 或从 attachShadow 创建了一个阴影根。所产生的根不同：在使用 createShadowRoot 创建的根中，< content> 元素用于分发元素。在使用 attachShadow 创建的根中，< content> 元素不执行任何操作，而 < slot> 代替使用元素。我们如何检测哪种方法用于创建根（即是否有v0根或v1根）？

解决方案

我去了Hayato Ito的回答方向。但是，我不是创建插槽元素，而是定位内容元素。我无法找到一种检测任何API方法检测版本的方法。

我针对内容元素，因为内容元素本身不具有事件，与 slot 事件的 slotchange 不同，希望可能导致一个小的性能提升。如果浏览器根本不支持 v0 ，则该函数返回 v1

  function shadowType（shadowRoot）{
 if（！shadowRoot）{
 //闭阴影dom似乎没有shadowRoot ... 
 //可以假设它是v1，但现在返回undefined 
 return; 
} 
 
 const content = document.createElement（'content'）; 
 //在支持v1但不是v0（例如：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）; 
 
返回类型; 
} 
  

它绝对感觉像一个黑客，因为需要附加随机的dom （。我在Chrome，Firefox，Safari，IE11和Edge中进行了测试，我测试了使用webcomponentsjs（v0）polyfill制作的组件，它正确地返回 v0 每个组件，我也使用只有shadydom（v1）polyfill测试这些相同的浏览器，并使用v1规范创建组件，并在所有这些浏览器中收到 v1 。 >

Suppose a JS module exports shadowRoot which was created with either el.createShadowRoot or el.attachShadow (we don't know which). How do we detect if the root is a v0 shadow root or a v1 shadow root (i.e. how do we detect which method was used to create the root)?

f.e., What would I fill in the following conditional statements?

// 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".

More info:

We want to find out if a shadow root was created from createShadowRoot or from attachShadow. The resulting roots are different: in the root created with createShadowRoot, <content> elements are used for distributing elements. In roots created with attachShadow, <content> elements don't do anything, and <slot> elements are used instead. How do we detect which method was used to create a root (i.e. whether we have a v0 root or a v1 root)?

解决方案

I went a similar direction to Hayato Ito's answer. However, instead of creating slot elements, I target content elements. I was not able to find a way to detect the version off of any API method detection.

I targeted content elements since content elements do not natively have events for them, unlike slotchange on the slot event, which hopefully could lead to a small performance boost. Plus the function returns v1 a little faster if the browser does not support 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;
}

It definitely feels like a "hack", because of need to append random dom :(. I did test this in Chrome, Firefox, Safari, IE11, and Edge. I tested components made using the webcomponentsjs (v0) polyfill, and it correctly returned v0 for each component. I also tested those same browsers with just the shadydom (v1) polyfill with components created with the v1 spec, and received v1 in all of those browsers.

这篇关于我们如何检测是否使用v0或v1 API制作了影子根？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！