使用 javascript 检查浏览器对 shadow dom v1 的支持

Question

有什么方法可以检查正在考虑的浏览器是否支持 shadow dom v1？

在应用程序中使用它对性能有何影响？

我想使用它，以便我可以将使用 css 从服务器检索到的 html 内容投影到我当前的视图中，而不会干扰现有的 css。

Answer 1

如 Shadow DOM v1 presentation 中所述：

To feature detect shadow DOM, check for the existence of attachShadow:

const supportsShadowDOMV1 = !!HTMLElement.prototype.attachShadow;

没有性能问题，除非您同时处理数千个 Shadow DOM。

Answer 2

如果你想签入 shadowDOM 原生 支持，那么使用这个：

const supportsShadowDom = !!/{s+[native code]s+}/.test((HTMLElement.prototype.attachShadow||'').toString());

如果您不关心它是否通过 polyfill 得到支持，那么使用这个：

const supportsShadowDom = !!HTMLElement.prototype.attachShadow;