Search code examples
htmlweb-componentshadow-dom

Check support for shadow dom v1 in browser using javascript

Is there any way to check the browser under consideration have support for shadow dom v1?

What is performance hit of using it in the application?

I want to use it so that I can project the html content retrieved from server with css into my current view without disturbing existing css.

Solution

  • As explained in Shadow DOM v1 presentation:

    To feature detect shadow DOM, check for the existence of attachShadow:

    const supportsShadowDOMV1 = !!HTMLElement.prototype.attachShadow;

    There's no performance concern unless you deal with thousands of Shadow DOM at the same time.