supportsDeclarativeShadowDOM returns true for current non-implementing browsers

[rictic]

The given function for feature detection:

function supportsDeclarativeShadowDOM() {
  return 'shadowRoot' in HTMLTemplateElement.prototype;
}

This returns true for existing browsers, as shadowRoot is defined on Element.prototype

[mfreed7]

Hmm very good point. Suggestions for a better way to feature detect?

[rictic]

This works in Chrome canary with --enable-blink-features=DeclarativeShadowDOM, but setting .innerHTML to a string is not compatible with some trusted types CSP configs, so it's not what we'd generally recommend:

let hasNative;
export function hasNativeDeclarativeShadowRoots() {
  if (hasNative === undefined) {
    const div = document.createElement('div');
    div.innerHTML = `<div><template shadowroot="open"></template></div>`;
    hasNative = !!div.firstElementChild.shadowRoot;
  }
  return hasNative;
}

It would be good to have some reliable way to tell, so that polyfills of the feature can avoid walking the document for templates.

[mfreed7]

@domenic do you have any recommendations here? The original

'shadowRoot' in HTMLTemplateElement.prototype

suggestion already returns true. Have we, in the past, added hooks that are just for doing feature detection? I.e. I could see adding

'supportsDeclarativeShadowDOM' in HTMLTemplateElement.prototype

but that seems ugly.

[domenic]

HTMLTemplateElement.prototype.hasOwnProperty("shadowRoot");

[mfreed7]

Thanks - that works! I've updated the explainer accordingly, but I still need to implement this in Chromium.