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

【问题标题】：Check support for shadow dom v1 in browser using javascript使用 javascript 检查浏览器中对 shadow dom v1 的支持
【发布时间】：2018-11-30 12:39:03
【问题描述】：

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

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

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

【问题讨论】：

标签： html web-component shadow-dom

【解决方案1】：

如Shadow DOM v1 presentation中所述：

要特征检测shadow DOM，检查attachShadow是否存在：

const supportsShadowDOMV1 = !!HTMLElement.prototype.attachShadow;

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

【讨论】：

【解决方案2】：

如果您想签入 shadowDOM 是否支持本机，请使用：

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

如果你不关心它是否被 polyfill 支持，那么使用这个：

const supportsShadowDom = !!HTMLElement.prototype.attachShadow;

【讨论】：