在 Salesforce（兔子洞）上检查时，阴影 DOM 未显示在带有阴影根的自定义元素中
Dav*_*tey 1 html javascript web-component shadow-dom salesforce-lightning
我试图了解 Salesforce 如何实施他们的自定义闪电组件元素。我已经阅读了一些帮助文档，这些文档暗示他们遵循 webcomponents 标准。
当我检查页面时：
所以这看起来像典型的 DOM 结构，但是当你进入控制台并查看闪电图标时，它说除非你进入 shadow dom，否则没有 childNodes：
> 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 和一个文档片段，它在检查器中作为 #shadow-root (open) 清晰可见。根据此处的 Mozilla 示例：https : //mdn.github.io/web-components-examples/popup-info-box-web-component/
我还注意到自定义元素不是注册的自定义元素。并且SF已经实现了自己的组件库等......
我想知道这是怎么回事？如果节点存储在那里，为什么不显示 #shadow-root 以及如何在纯 JS 中实现自定义元素，以便我可以重新创建。
谢谢！
Salesforce Lightning 不使用真正的（本机）Shadow DOM。
这就是您#shadow-root (open)在元素检查器中看不到文档片段的原因。
他们对 Shadow DOM 行为和HTMLElement.shadowRoot属性进行了 polyfill 。
他们还重载了该Node.childNode属性以模仿 Shadow DOM 行为。
他们使用的 polyfill 在这里：https : //www.npmjs.com/package/@lwc/engine