# whenReady

Function · category: Functions

Source: https://github.com/playcanvas/web-components/blob/252f001881302c266c8d727044408c32be2bb5e7/src/async-element.ts#L114

```ts
whenReady<K extends AsyncElementTagName>(target: K): Promise<HTMLElementTagNameMap[K]>
```

Waits for the first element matching the given tag name to be fully initialized. Note that the
promise never settles if the element cannot finish initializing (for example, a `<pc-script-instance>`
that is not a direct child of `<pc-script>`, or a `<pc-app>` that could not create a graphics
device — listen for its `error` event instead). A component element outside an entity-fronting
element is the exception: it still becomes ready, but its `component` is `null`. Either way, a
misplaced element logs a warning naming the parent it requires.

**Parameters**

- `target` ([`K`](https://api.playcanvas.com/web-components/functions/whenReady.md#whenreadyk)): The tag name of the element to wait for (e.g. `'pc-app'`).

**Returns** `Promise<HTMLElementTagNameMap[`[`K`](https://api.playcanvas.com/web-components/functions/whenReady.md#whenreadyk)`]>`: A promise that resolves with the element once it's ready.

**Example**

```ts
const { app } = await whenReady('pc-app');
```

```ts
whenReady<T extends AsyncElement>(target: T): Promise<T>
```

Waits for the given element to be fully initialized. Note that the promise never settles if
the element cannot finish initializing (for example, an element that is never added to the
document).

**Parameters**

- `target` ([`T`](https://api.playcanvas.com/web-components/functions/whenReady.md#whenreadyt)): The element to wait for.

**Returns** `Promise<`[`T`](https://api.playcanvas.com/web-components/functions/whenReady.md#whenreadyt)`>`: A promise that resolves with the element once it's ready.

**Example**

```ts
const appElement = document.createElement('pc-app');
document.body.appendChild(appElement);
const { app } = await whenReady(appElement);
```

```ts
whenReady<T extends AsyncElement, S extends string>(target: S extends "object" | "audio" | "html" | "script" | "template" | "map" | "input" | "progress" | "select" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "i" | "iframe" | "img" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "section" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "pc-material" ? never : S): Promise<T>
```

Waits for the first element matching the given CSS selector to be fully initialized. Note that
the promise never settles if the element cannot finish initializing (for example, a `<pc-script-instance>`
that is not a direct child of `<pc-script>`, or a `<pc-app>` that could not create a graphics
device — listen for its `error` event instead). A component element outside an entity-fronting
element is the exception: it still becomes ready, but its `component` is `null`. Either way, a
misplaced element logs a warning naming the parent it requires.

**Parameters**

- `target` ([`S`](https://api.playcanvas.com/web-components/functions/whenReady.md#whenreadys) `extends "object" | "audio" | "html" | "script" | "template" | "map" | "input" | "progress" | "select" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "i" | "iframe" | "img" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "section" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "pc-material" ? never :` [`S`](https://api.playcanvas.com/web-components/functions/whenReady.md#whenreadys)): A CSS selector matching the element to wait for (e.g. `'#my-app'`).

**Returns** `Promise<`[`T`](https://api.playcanvas.com/web-components/functions/whenReady.md#whenreadyt-1)`>`: A promise that resolves with the element once it's ready.

**Example**

```ts
// In TypeScript, supply the element type when using an arbitrary selector
const { entity } = await whenReady<EntityElement>('pc-entity[name="camera"]');
```