问题描述
我试图了解 Salesforce 如何实施他们的自定义闪电组件元素.我已经阅读了一些帮助文档，这些文档暗示他们遵循 webcomponents 标准.
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.
当我检查页面时:
所以这看起来像典型的 DOM 结构，但是当您进入控制台并查看闪电图标时，它说除非您进入 shadow dom，否则没有 childNode:
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)}
现在，通常如果有一个影子根和一个文档片段，它在检查器中清晰可见，为#shadow-root(打开).根据此处的 Mozilla 示例:https://mdn.github.io/web-components-examples/popup-info-box-web-component/
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/
我还注意到自定义元素不是注册的自定义元素.并且SF已经实现了自己的组件库等...
I also noticed that the custom elements aren't registered custom elements. And SF have implemented their own component library etc...
我想知道发生了什么?如果节点存储在那里，为什么不显示 #shadow-root 以及如何在纯 JS 中实现自定义元素以便我可以重新创建.
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.
谢谢！
推荐答案
Salesforce Lightning 不使用真正的(原生)Shadow DOM.
Salesforce Lightning doesn't use a real (native) Shadow DOM.
这就是您在元素检查器中看不到 #shadow-root (open) 文档片段的原因.
That's why you don't see the #shadow-root (open) document fragment in the Elements inspector.
他们填充了 Shadow DOM 行为和 HTMLElement.shadowRoot 属性.
They have polyfilled the Shadow DOM behaviour and the HTMLElement.shadowRoot property.
他们还重载了 Node.childNode 属性来模仿 Shadow DOM 行为.
Also they have overloaded the Node.childNode property to mimic the Shadow DOM behaviour.
他们使用的 polyfill 在这里:https://www.npmjs.com/package/@lwc/engine
The polyfill they are using is here: https://www.npmjs.com/package/@lwc/engine
这篇关于在 Salesforce(兔子洞)上检查时，阴影 DOM 未显示在带有阴影根的自定义元素中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！