css - 如何检查浏览器是否支持影子 DOM

Question

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

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和 http://caniuse.com/#feat=shadowdom