Shadow DOM not shown in Custom Element with Shadow Root when inspected on Salesforce (Rabbit hole)

Question

I'm trying to understand how Salesforce have implemented their custom lightning component elements. I've read some of the help docs which imply they're following webcomponents standards.

When I inspect the page:

So this looks like typical DOM structure, but when you go into the console and look into the lightning-icon it says there's no childNodes unless you go into the shadow dom:

> document.querySelector('lightning-icon.slds-icon-standard-home').childNodes
> NodeList {Symbol(items): Array(0)}

> document.querySelector('lightning-icon.slds-icon-standard-home').shadowRoot.childNodes
> NodeList {0: lightning-primitive-icon, Symbol(items): Array(1)}

Now, normally if there's a shadow root and a document fragment it's clearly visible in the inspector as #shadow-root (open). As per the Mozilla example here: https://mdn.github.io/web-components-examples/popup-info-box-web-component/

I also noticed that the custom elements aren't registered custom elements. And SF have implemented their own component library etc...

I'd like to know what's going on? Why isn't the #shadow-root being shown if the nodes are stored there and how are the custom elements being implemented in plain JS so I can recreate.

Thanks!

Answer 1

Salesforce Lightning doesn't use a real (native) Shadow DOM.

That's why you don't see the #shadow-root (open) document fragment in the Elements inspector.

They have polyfilled the Shadow DOM behaviour and the HTMLElement.shadowRoot property.

Also they have overloaded the Node.childNode property to mimic the Shadow DOM behaviour.

The polyfill they are using is here: https://www.npmjs.com/package/@lwc/engine

3rd party edit

The package /@lwc/engine above is deprecated. But even if the current version might have changes they still use a polyfill. From the LWC documentation

Since not all browsers implement shadow DOM, Lightning Web Components uses a shadow DOM polyfill (@lwc/synthetic-shadow).