在 Salesforce（兔子洞）上检查时，阴影 DOM 未显示在带有阴影根的自定义元素中答案

【问题标题】：Shadow DOM not shown in Custom Element with Shadow Root when inspected on Salesforce (Rabbit hole)在 Salesforce（兔子洞）上检查时，阴影 DOM 未显示在带有阴影根的自定义元素中
【发布时间】：2019-04-17 14:00:52
【问题描述】：

我试图了解 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/

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

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

谢谢！

【问题讨论】：

如果有页面可以去看看就好了。
它在 salesforce 应用程序中。而且我正在尝试学习如何重新创建它......所以我还不能创建一个有效地模仿他们的实现的示例。

标签： javascript html web-component shadow-dom salesforce-lightning

【解决方案1】：

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

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

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

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

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

【讨论】：

很棒的信息@supersharp。你知道我如何使用 lwc 来重新创建他们正在做的事情吗？您还知道是否可以撤消 Node.childNode 的重载，使其恢复到本机行为？
@DavidLBatey 您想将其用于 Salesforce 还是用于其他应用程序？
其他应用程序。我希望能够在测试应用中复制它在 SF 上的工作方式，以了解不同的技术如何与之交互。
您可以从 npm (npm i @lwc/engine) 安装它，但我不知道它是否有据可查。另外我不知道如何强制原生 Shadow DOM 行为（以及为什么它不在 SF 中使用）。
如果你愿意的话，就 webcomponents 和 shadowdom 聊天/skype 会很棒。我的电子邮件是 [SOuser]@gmail.com