query-assigned-elements.d.ts 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. /**
  2. * @license
  3. * Copyright 2021 Google LLC
  4. * SPDX-License-Identifier: BSD-3-Clause
  5. */
  6. import type { ReactiveElement } from '../reactive-element.js';
  7. import type { QueryAssignedNodesOptions } from './query-assigned-nodes.js';
  8. /**
  9. * Options for the {@linkcode queryAssignedElements} decorator. Extends the
  10. * options that can be passed into
  11. * [HTMLSlotElement.assignedElements](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/assignedElements).
  12. */
  13. export interface QueryAssignedElementsOptions extends QueryAssignedNodesOptions {
  14. /**
  15. * CSS selector used to filter the elements returned. For example, a selector
  16. * of `".item"` will only include elements with the `item` class.
  17. */
  18. selector?: string;
  19. }
  20. /**
  21. * A property decorator that converts a class property into a getter that
  22. * returns the `assignedElements` of the given `slot`. Provides a declarative
  23. * way to use
  24. * [`HTMLSlotElement.assignedElements`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/assignedElements).
  25. *
  26. * Can be passed an optional {@linkcode QueryAssignedElementsOptions} object.
  27. *
  28. * Example usage:
  29. * ```ts
  30. * class MyElement {
  31. * @queryAssignedElements({ slot: 'list' })
  32. * listItems!: Array<HTMLElement>;
  33. * @queryAssignedElements()
  34. * unnamedSlotEls!: Array<HTMLElement>;
  35. *
  36. * render() {
  37. * return html`
  38. * <slot name="list"></slot>
  39. * <slot></slot>
  40. * `;
  41. * }
  42. * }
  43. * ```
  44. *
  45. * Note, the type of this property should be annotated as `Array<HTMLElement>`.
  46. *
  47. * @category Decorator
  48. */
  49. export declare function queryAssignedElements(options?: QueryAssignedElementsOptions): (protoOrDescriptor: ReactiveElement | import("./base.js").ClassElement, name?: PropertyKey | undefined) => any;
  50. //# sourceMappingURL=query-assigned-elements.d.ts.map