HomeWeb Components API Reference - v0.10.1
    Preparing search index...

    Function whenReady

    • 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> that is not a direct child of <pc-scripts>). A component element outside a <pc-entity> 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.

      Type Parameters

      Parameters

      • target: K

        The tag name of the element to wait for (e.g. 'pc-app').

      Returns Promise<HTMLElementTagNameMap[K]>

      A promise that resolves with the element once it's ready.

      const { app } = await whenReady('pc-app');
      
    • 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).

      Type Parameters

      Parameters

      • target: T

        The element to wait for.

      Returns Promise<T>

      A promise that resolves with the element once it's ready.

      const appElement = document.createElement('pc-app');
      document.body.appendChild(appElement);
      const { app } = await whenReady(appElement);
    • 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> that is not a direct child of <pc-scripts>). A component element outside a <pc-entity> 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.

      Type Parameters

      Parameters

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

        A CSS selector matching the element to wait for (e.g. '#my-app').

      Returns Promise<T>

      A promise that resolves with the element once it's ready.

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