如何检查浏览器是否支持阴影 DOM

Question

一种方法是检查元素上是否有 .shadowRoot 属性，但是我需要在呈现页面之前 return 一个布尔值。

Answer 1

一个简单的功能测试是：

if (document.head.createShadowRoot || document.head.attachShadow) {
    // I can shadow DOM
} else {
    // I can't
}

即使您将脚本包含在 head 部分并假设在您之前没有添加恶意脚本（一个安全的假设），这也会起作用。

目前，Chrome、Opera 和衍生浏览器（如 Android 浏览器）支持它。如需更多信息，请访问：https://caniuse.com/#feat=shadowdomv1 and http://caniuse.com/#feat=shadowdom

How to check if a browser supports shadow DOM