javascript - 在 Salesforce 上检查时，Shadow DOM 未显示在带有 Shadow Root 的自定义元素中(兔子洞)

Question

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

当我检查页面时:

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

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

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

谢谢!

Answer 1

Salesforce Lightning 不使用真实( native )Shadow DOM。

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

他们对 Shadow DOM 行为和 HTMLElement.shadowRoot 属性进行了 polyfill。

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

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

第三方编辑

包裹/@lwc/engine以上已弃用。但即使当前版本可能有变化，他们仍然使用 polyfill。来自LWC documentation

Since not all browsers implement shadow DOM, Lightning Web Componentsuses a shadow DOM polyfill (@lwc/synthetic-shadow).