Tengo un componente web personalizado que tiene varios componentes web anidados.

 <pdf-viewer path="test.pdf" clipTop="52" fromPage="6" toPage="9" clipBottom="18" pagesCount="29" clipAll> <pdf-page pageHeight="842" pageWidth="594" page="1"></pdf-page> <pdf-page pageHeight="842" pageWidth="594" page="2"></pdf-page> <pdf-page pageHeight="842" pageWidth="594" page="3"></pdf-page> </pdf-viewer>

En el componente del visor de pdf, quiero acceder al atributo de página de la página de pdf y, en función de eso, agregar un atributo a este elemento de página de pdf .

Así que mi código se ve así:

 import { html, LitElement } from 'lit'; export class PdfViewer extends LitElement { static get properties() { return { path: { type: String }, fromPage: { type: Number }, toPage: { type: Number }, clipTop: { type: Number }, clipBottom: { type: Number }, clipAll: { type: Boolean }, pagesCount: { type: Number }, }; } constructor() { super(); this.fromPage = 1; this.toPage = 0; this.clipAll = true; } firstUpdated() { const slot = this.renderRoot.querySelector('slot'); const pages = slot.assignedNodes(); pages.forEach(page => { const pageNumber = page.getAttribute('page'); if (this.clipAll && pageNumber === this.fromPage) page.setAttribute('clipTop', this.clipTop); if (this.clipAll && pageNumber === this.toPage) page.setAttribute('clipBottom', this.clipBottom); if ( this.clipAll && (pageNumber < this.fromPage || pageNumber > this.toPage) ) page.setAttribute('clipAll', ''); page.addEventListener('expand-pdf', () => { }); }); } render() { return html` <div class="pdfViewer"> <slot></slot> </div> `; } }

Esto no funciona, no obtengo el atributo de página.