Как проверить, поддерживает ли браузер теневое DOM

Один из способов - проверить, есть ли свойство .shadowRoot для элемента, однако мне нужно вернуть логическое значение до отображения страницы.

Ответ 1

Одним из простых тестов будет:

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

Это будет работать, даже если вы включите сценарий в раздел заголовка и предположите, что вредоносные сценарии не были добавлены до ваших (безопасное предположение).

В настоящее время его поддерживают Chrome, Opera и производные браузеры (например, браузеры Android). Для получения дополнительной информации посетите: https://caniuse.com/#feat=shadowdomv1 и http://caniuse.com/#feat=shadowdom