在Salesforce（Rabbit hole）上检查时，Shadow DOM未显示在带阴影根的自定义元素中

Question

我正在尝试了解Salesforce如何实现其自定义闪电组件元素。我已经阅读了一些帮助文档，这些文档暗示他们遵循webcomponents标准。

当我检查页面时：

所以这看起来像典型的DOM结构，但是当你进入控制台并查看闪电图标时，它表示没有childNodes，除非你进入阴影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（open）。根据Mozilla的例子：https://mdn.github.io/web-components-examples/popup-info-box-web-component/

我还注意到自定义元素不是注册的自定义元素。 SF已经实现了自己的组件库等......

我想知道发生了什么事？如果节点存储在那里，为什么不显示＃shadow-root？如何在普通JS中实现自定义元素，以便重新创建。

谢谢！

Answer 1

Salesforce Lightning不使用真实（本机）Shadow DOM。

这就是为什么你没有在Elements检查器中看到#shadow-root (open)文档片段的原因。

他们已经填充了Shadow DOM行为和HTMLElement.shadowRoot属性。

他们还重载了Node.childNode属性以模仿Shadow DOM行为。

他们使用的polyfill在这里：https://www.npmjs.com/package/@lwc/engine