如何获取 HTML 自定义元素的子元素？答案

【问题标题】：How to get children of HTML custom elements?如何获取 HTML 自定义元素的子元素？
【发布时间】：2021-11-26 13:11:52
【问题描述】：

我正在用 puppeteer 编写一个刮板，我需要填写一个用 Aura js 构建的表单的字段。问题是我无法访问输入和密码字段，因为它们位于自定义元素中：

<lightning-input class="input sfdc_usernameinput slds-form-element" data-aura-rendered-by="116:0" lightning-input_input-host=""><span lightning-input_input="" data-aria="" class="slds-assistive-text"></span><label lightning-input_input="" for="input-5" class="slds-form-element__label slds-no-flex slds-assistive-text">Username</label>
    <div lightning-input_input="" class="slds-form-element__control slds-grow">
        <input lightning-input_input="" type="text" id="input-5" aria-invalid="false" placeholder="Username" class="slds-input">
    </div>
</lightning-input>

当我尝试时：

await page.type('#input-5', 'myusername');

它会抛出错误：

Error: No node found for selector: #input-5

如果我在浏览器控制台中尝试 document.getElementById('#input-5')，则可以确认这一点。

那么我如何获得该输入？

编辑：添加显示此处发生的情况的屏幕截图：带有子元素但无法访问它们的标记。

【问题讨论】：

您确定这是因为它们位于自定义元素中，而不是因为您试图在 DOM 完全加载之前获取它吗？
@JamesHill 确认，正如我所写，即使使用浏览器控制台也会发生这种情况（所以当页面完全加载时）

标签： javascript html web-scraping puppeteer

【解决方案1】：

您要查找的元素被封装在 shadow DOM 中，从而使它们对正常的 DOM 查询方法隐藏。

您仍然可以像这样查询它们：

document.querySelector("lightning-badge").shadowRoot.querySelector('#input-5')

示例：在this Aura demo page 上，我可以使用以下代码获取闪电徽章的文本：

document.querySelector("lightning-badge").shadowRoot.textContent

“起始位置”

当然，这个查询也可以在带有 puppeteer 的 page.evaluate 方法中执行。

【讨论】：

成功了！谢谢。