允许 WebComponent Shadow-Root 可抓取

问题描述 投票：0回答：1

我有一个用例，我正在尝试创建一个 Angular WebComponent 库，并且我希望它可以在屏幕上抓取，以便可以使用 PrincePDF 进行打印。

问题是，当我们使用实际组件时，shadow-root 会暴露底层 HTML，但 Prince 无法识别这一点，因为该组件只暴露底层 dom 元素。

这是我在“Elements”下的页面上看到的 - Shadow-root 具有 div 和 h1 dom 元素，您可以看到“我可见！”的字样

enter image description here

但是，当我们渲染 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 元素暴露给王子，这样它就能把这一切都呈现出来。

html web-component shadow-dom princexml shadow-root
1个回答
0
投票

您只能通过进入“打开”shadowRoots

document.querySelector("my-component").shadowRoot.querySelector("div")



通过shadowRoot level处理shadowRoot level

    



      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.