Should this be an RFC?

• This is not a substantial change

Which package is this a feature request for?

Observers (@lit-labs/observers)

Description

It would be very useful to be able to observe individual elements with ResizeController.

An example use case is an accordion-style widget where sections of it can be opened. If we need to observe the open sections (say to overlay an SVG), then we want to observe the section directly, not the host, and we want to be able to conditionally observe sections so that they're only observed when open.

I've forked ResizeController and used this API successfully:

ResizeController {
  target(observe: boolean = true);
}

Example usage:

class MyAccordion extends LitElement {

  #resizeController = new ResizeController(this, {target: null});

  @property()
  accessor selectedItemId: string | undefined = undefined;

  @property({attribute: false})
  accessor items: Array<Item> | undefined = undefined;

  render() {
    return this.items?.map((i) => {
      const selected = i.id === this.selectedItemId;
      return html`
        <section
          class="${selected ? 'selected' : ''}"
          ${this.#resizeController.target(selected)}
      ></section>
    `);
  }
}

Alternatives and Workarounds

You either have to use ResizeObserver directly or imperative use .observe() after template updates in updated().