我有一个用例,我正在尝试创建一个 Angular WebComponent 库,并且我希望它可以在屏幕上抓取,以便可以使用 PrincePDF 进行打印。
问题是,当我们使用实际组件时,shadow-root 会暴露底层 HTML,但 Prince 无法识别这一点,因为该组件只暴露底层 dom 元素。
这是我在“Elements”下的页面上看到的 - Shadow-root 具有 div 和 h1 dom 元素,您可以看到“我可见!”的字样
但是,当我们渲染 HTML 时,Prince 本质上“看到”了这一点。
<html>
<head>
<title>My Component</title>
</head>
<body>
<app-root ng-version="14.3.0">
<library>
<component-library>
<h1>My Component</h1>
<my-component></my-component>
</component-library>
</library>
</app-root>
</body>
</html>
prince 显然不知道
my-component
是什么,因此它显示一个空页面(减去 H1“我的组件”标题)。
我们实际上将 Web 组件托管在服务器上托管的库中,该服务器可以使用 Prince PDF 来本地访问服务器来呈现 HTML 文档,因此我试图找到一种方法来将影子根 HTML 元素暴露给王子,这样它就能把这一切都呈现出来。
您只能通过进入“打开”shadowRoots
document.querySelector("my-component").shadowRoot.querySelector("div")