How to check if a browser supports shadow DOM

Question

One way would be to check if there is a .shadowRoot property on an element, however I need to return a boolean before the page is rendered.

Answer 1

One simple feature test would be:

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

This will work even if you include the script in the head section and assumes no malicious scripts were added prior to yours (a safe assumption).

Currently, Chrome, Opera, and derived browsers (like Android browsers) support it. For more information, visit: https://caniuse.com/#feat=shadowdomv1 and http://caniuse.com/#feat=shadowdom