Web 组件操作插槽的属性

Question

我有一个自定义的 Web 组件，它有多个嵌套的 Web 组件。

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

在 pdf-viewer 组件中我想访问 pdf-page 的 page 属性，并在此基础上添加一个属性 pdf-page 元素。

所以我的代码如下所示：

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

这不起作用，我没有获取页面属性。

Answer 1

我想通了。我必须使用slot.assignedElements() 来获取我可以用来获取/添加属性的 HTMLElements。