问题
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!
回答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
来源：https://stackoverflow.com/questions/55729338/shadow-dom-not-shown-in-custom-element-with-shadow-root-when-inspected-on-salesf