在Salesforce（兔子孔）上检查时，Shadow DOM未显示在具有Shadow Root的“自定义元素”中

Question

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

当我检查页面时：

所以这看起来像典型的DOM结构，但是当您进入控制台并查看闪电图标时，它说没有childNode，除非您进入影子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/

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

我想知道怎么回事？如果未将节点存储在其中，为什么没有显示＃shadow-root，以及如何在纯JS中实现自定义元素，所以我可以重新创建。

谢谢！

Answer 1

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

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

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

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

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