UNPKG

@zywave/zui-bundle

Version:

ZUI, out of the box, provides ES modules with bare path modifiers (e.g. `import '@zywave/zui-foo-bar'`). This is great as that's the way browsers are _going_, but they aren't there quite yet. Tooling exists to help solve this problem like webpack or rollu

55 lines (52 loc) 1.5 kB
import { d as desc } from './_ab875545.js'; /** * @license * Copyright 2021 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ /** * A property decorator that converts a class property into a getter that * returns the `assignedElements` of the given `slot`. Provides a declarative * way to use * [`HTMLSlotElement.assignedElements`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/assignedElements). * * Can be passed an optional {@linkcode QueryAssignedElementsOptions} object. * * Example usage: * ```ts * class MyElement { * @queryAssignedElements({ slot: 'list' }) * listItems!: Array<HTMLElement>; * @queryAssignedElements() * unnamedSlotEls!: Array<HTMLElement>; * * render() { * return html` * <slot name="list"></slot> * <slot></slot> * `; * } * } * ``` * * Note, the type of this property should be annotated as `Array<HTMLElement>`. * * @category Decorator */ function queryAssignedElements(options) { return (obj, name) => { const { slot, selector } = options ?? {}; const slotSelector = `slot${slot ? `[name=${slot}]` : ':not([name])'}`; return desc(obj, name, { get() { const slotEl = this.renderRoot?.querySelector(slotSelector); const elements = slotEl?.assignedElements(options) ?? []; return selector === undefined ? elements : elements.filter(node => node.matches(selector)); } }); }; } export { queryAssignedElements as q };