在浏览器中使用javascript

Question

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

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

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

Answer 1

如Shadow DOM v1 presentation中所述：

  

要检测阴影DOM，请检查是否存在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;