I have a custom web component which have multiple nested web components.

<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>

In pdf-viewer component i want to access the page attribute of pdf-page and based on that add an attribute to this pdf-page element.

So my code looks like this:

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>
    `;
  }
}

This doesn't work, i don't get page attribute.