Search code examples
javascriptgoogle-chromeweb-componentshadow-domcustom-element

Can a attachShadow return a #document-fragment that isn't a #shadow-root?

I'm not using a polyfill in Chrome, and in some cases I see that this.shadowRoot in my custom element is a #document-fragment and not a #shadow-root.

For example, here's some code inside my custom element, see what it says when I hover in the debugger:

enter image description here

I was expecting to see #shadow-root.

Is there an upgrade process whereby during some small amount of time, initially, the #document-fragment is not yet a #shadow-root?

Solution

  • shadowRoot property should always be of type #document-fragment / DocumentFragment.

    As per the WHATWG DOM specs:

    interface ShadowRoot : DocumentFragment {

    readonly attribute ShadowRootMode mode;
    readonly attribute Element host;

    };

    You should see #shadow-root only in the Element pane.

    You should see #document-fragment in the Sources pane.