diff --git a/docs/components/resize-observer.md b/docs/components/resize-observer.md index 32f3c9684..9dbd6e905 100644 --- a/docs/components/resize-observer.md +++ b/docs/components/resize-observer.md @@ -2,9 +2,9 @@ [component-header:sl-resize-observer] -Resize observers offer a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver). +The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver). -The resize observer will report changes to the dimensions of the elements it wraps through the `sl-resize` event. When emitted, a collection of [`ResizeObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry) objects will be attached to `event.detail`, containing the target element and information about its dimensions. +The resize observer will report changes to the dimensions of the elements it wraps through the `sl-resize` event. When emitted, a collection of [`ResizeObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry) objects will be attached to `event.detail` that contains the target element and information about its dimensions. ```html preview
@@ -20,7 +20,7 @@ The resize observer will report changes to the dimensions of the elements it wra const resizeObserver = container.querySelector('sl-resize-observer'); resizeObserver.addEventListener('sl-resize', event => { - console.log(event); + console.log(event.detail); }); diff --git a/src/components/resize-observer/resize-observer.ts b/src/components/resize-observer/resize-observer.ts index 86016509b..ed2b217d0 100644 --- a/src/components/resize-observer/resize-observer.ts +++ b/src/components/resize-observer/resize-observer.ts @@ -7,6 +7,8 @@ import styles from './resize-observer.styles'; * @since 2.0 * @status stable * + * @slot - One or more elements to watch for resizing. + * * @event {{ entries: ResizeObserverEntry[] }} sl-resize - Emitted when the element is resized. */ @customElement('sl-resize-observer')