{"_id":"@alexspirgel/children-loaded","_rev":"1-ffc93504c9761e9c274269229bee41b9","name":"@alexspirgel/children-loaded","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@alexspirgel/children-loaded","version":"1.0.0","author":{"name":"Alexander Spirgel"},"description":"A JavaScript function for determining if child elements are loaded.","keywords":["children","loaded","parsed","built-in","web","component"],"main":"src/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/alexspirgel/children-loaded.git"},"homepage":"https://github.com/alexspirgel/children-loaded#readme","bugs":{"url":"https://github.com/alexspirgel/children-loaded/issues"},"scripts":{"build":"webpack","start":"webpack"},"devDependencies":{"terser-webpack-plugin":"^5.3.7","webpack":"^5.78.0","webpack-cli":"^5.0.1"},"gitHead":"c19df47b84a1145b4aac9dc264b52f09a92e57d1","_id":"@alexspirgel/children-loaded@1.0.0","_nodeVersion":"14.7.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-oPgxqzlJq869WtjSXb9MkKaJKOpouFFUNQ4HJTnEUkNZODUo5GqHYGTPGdVWx5bkydBG3IJDYTDrV8BT327geQ==","shasum":"c9ffffa3f594d940474003b5cd991189c3c17b25","tarball":"https://registry.npmjs.org/@alexspirgel/children-loaded/-/children-loaded-1.0.0.tgz","fileCount":4,"unpackedSize":8801,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSBk4/f4c3/FKWBZYCA/DI4ykReLCa/2Dsd1dDoxkpmAIgVxjBj0ct2yLNSWPIdmyC5YRzkxVwvTJSp7C5dCCPKNg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkMh7hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7zw//ZsApxFmRrOkaqKif1CfHHlW7NYBOv9rZ2gWvXjq56IyuCCIs\r\nh2NM5aMQAIhKyp2cJYvBkLfZ1P6IEwmwZRV4doE36nvWChTGbWIBLAuZa/IY\r\nibre3kG2HVsD7Yw6I4qDC//FClpkzv/0kzLEfbfOmaC7ynlRQ1Okqiwo8IFj\r\nfKv7qeFsdPBcm6wPGxCPHh7YaAyWgfayZFWNCDkfGb094tLCO1V6qtzUqbe3\r\nX0e2JE9Gre8GPcr4niOS0lEmoxzS1pCSyI9U1E2NEtVKDg+37OLNI30O7wgI\r\neT7Klz1vSglg+ZroHpgEOoLtj0YkyVXFUiV+aD3NB8cwJsSuoe0fek8glKw5\r\nZcf2eAfAT1zfb8GciOUT5kO8wAUTDYO0vJLIlZi5tFyOX4xNQr1OuYzbP0c4\r\n7+uBxiw57F2z4FioY+Xe6l5HY94u6PbOm8aTcQXgvtCOudX/I6apEC4kIyZ6\r\nKEY2K8tJyMDgSfzxzbmLhjocEfwmq8EUgSV5r9AMP53fEn/maawwnuXFY3IW\r\nuis5+76Yqq6hMZq6VwLDt2jPAZjw5jPPsvDeVMF0FAOOevtG9VB1EVRcW6s1\r\nHxlLAkjhsyDVbagmxFmvD2XwXiZ8cUMP1i4CYQ2e8MSQ02V13i24GNALvcM2\r\nCf4l6c53dYUeE8LKooJp8RrkXeWUxtfEhwA=\r\n=PPHp\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alexspirgel","email":"spirgel.alexander@gmail.com"},"directories":{},"maintainers":[{"name":"alexspirgel","email":"spirgel.alexander@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/children-loaded_1.0.0_1681006305263_0.7559317745508749"},"_hasShrinkwrap":false},"1.0.1":{"name":"@alexspirgel/children-loaded","version":"1.0.1","author":{"name":"Alexander Spirgel"},"description":"A JavaScript function for determining if child elements are loaded.","keywords":["children","loaded","parsed","built-in","web","component"],"main":"src/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/alexspirgel/children-loaded.git"},"homepage":"https://github.com/alexspirgel/children-loaded#readme","bugs":{"url":"https://github.com/alexspirgel/children-loaded/issues"},"scripts":{"build":"webpack","start":"webpack"},"devDependencies":{"terser-webpack-plugin":"^5.3.7","webpack":"^5.78.0","webpack-cli":"^5.0.1"},"gitHead":"264cf80855fd9585c38553e90e5f65fa1f340b64","_id":"@alexspirgel/children-loaded@1.0.1","_nodeVersion":"14.7.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-Kvqf7jhTrx4vLccEfhNoHONYqZpomYBkzVzqvklxiTlgf3XixFlTDW4k7pr8OHV627yXgxcvNQXhIINhJfHudA==","shasum":"827d6c69f3d9670a65d7e4e1b196654925b6534f","tarball":"https://registry.npmjs.org/@alexspirgel/children-loaded/-/children-loaded-1.0.1.tgz","fileCount":4,"unpackedSize":8798,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA/q/xxwhaY/VX4ENhG2pB8eJNrCdm0BbbCkY5J6opqpAiEAzn9IRXS8NDQKji1PaXTwpfvsJ1paLVfnEj42kjioqtw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkMh+oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5xBAAipp9xrJeKbjg8465AWXutCCgOhlpiH6bYQbMmt/tGEZ6QxTv\r\nWoKZx5pCAF9nKde1Wm3ks5jTf9wNnG8seCvKn4qRtEUgx9f3NQWlkfo7vbJw\r\nDqPF4v/eQzEghVg7GtJEDVBG2Y/2mnBE0fLAO7zmyb2eotjRf/MGAxe09Hqo\r\nfjnWIW4u/DWq7Y6ucfAnZnu6euCvRyysQ6qR/YkxCOJtSRnuPvRK6DZwV/fS\r\n6TkipoqFLMtxpTmu65GgYHCYOjYp2HLs+FchpX7sgkHy1hSxvGgZ0+BkuqXQ\r\n68pve0gBbHMWW4Cq6eW055l6G5MsvaLmf/tHaTGCu0MbCVBHIbWqvKq9XBkQ\r\nJkFCVG7mINfMqAYN8uJd//T1pmuaF+4M8dIvJVfg9CaFQhosGnxs/XbeNtW1\r\nfqjO4W/J6kgwZ0zdUU8NKQfmyflKSUcIhsNg0QBbJkc3YtOCIMBwd+qIlsXY\r\n1//h+ykPvPILa3XCi+NgXRqoDi6GxynDyAb6W6ShL4RTiDbmlN9dsOlGo1G9\r\nbeCzj9Ns0bc1bzWnWNSdTiKvCKWi30E+svIHYUrJ5XRmNzqffkdNU74O4ml2\r\nyyzTjLTP7+YPL1UAWXw7eqn2L6t0l29HcTg/y2hWE7vhedLyDMEHHWs1/qkf\r\nyOSgNx+NIshHcamk+czMu+WERg5thr39Ja0=\r\n=4hXk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alexspirgel","email":"spirgel.alexander@gmail.com"},"directories":{},"maintainers":[{"name":"alexspirgel","email":"spirgel.alexander@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/children-loaded_1.0.1_1681006503898_0.21837452715482386"},"_hasShrinkwrap":false}},"time":{"created":"2023-04-09T02:11:45.209Z","1.0.0":"2023-04-09T02:11:45.424Z","modified":"2023-04-09T02:15:04.216Z","1.0.1":"2023-04-09T02:15:04.074Z"},"maintainers":[{"name":"alexspirgel","email":"spirgel.alexander@gmail.com"}],"description":"A JavaScript function for determining if child elements are loaded.","homepage":"https://github.com/alexspirgel/children-loaded#readme","keywords":["children","loaded","parsed","built-in","web","component"],"repository":{"type":"git","url":"git+https://github.com/alexspirgel/children-loaded.git"},"author":{"name":"Alexander Spirgel"},"bugs":{"url":"https://github.com/alexspirgel/children-loaded/issues"},"license":"MIT","readme":"# Children Loaded\r\n\r\nChildren Loaded is a JavaScript function for determining if child elements are loaded. This script was developed for use with built-in web components, but it is flexible enough to be used in other contexts as well.\r\n\r\n## The Built-In Web Component Problem\r\n\r\nBuilt-in web components are HTML elements that can behave as a registered custom element. You can read more about built-in web components here: <a href=\"https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements\" target=\"_blank\">https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements</a>\r\n\r\nA problem occurs when a built-in custom element is constructed and need access to its child elements. Available native callbacks fire too early. Both the `constructor` and the `connectedCallback` methods are called before child elements are parsed. You can read a lengthy discussion about this issue here: <a href=\"https://github.com/WICG/webcomponents/issues/809\" target=\"_blank\">https://github.com/WICG/webcomponents/issues/809</a>\r\n\r\n## Installation\r\n\r\n### Option 1: Install using NPM\r\n\r\nInstall the script using NPM via the command line:\r\n\r\n```\r\nnpm install @alexspirgel/children-loaded\r\n```\r\n\r\nRequire the script in the codebase where necessary:\r\n\r\n```js\r\nconst childrenLoaded = require('@alexspirgel/children-loaded');\r\n```\r\n\r\n### Option 2: Install using a script tag\r\n\r\nDownload the normal or minified script from the 'dist' folder.\r\n\r\nAdd a script tag with a path to the downloaded file. Make sure this script tag is placed before other script tags that need access to the `childrenLoaded` function.\r\n\r\n```html\r\n<script src=\"path/to/children-loaded.min.js\"></script>\r\n```\r\n\r\n## Usage\r\n\r\n```js\r\nconst childrenLoaded = require('@alexspirgel/children-loaded');\r\n\r\nclass MyCustomElement extends HTMLUListElement {\r\n\tconstructor() {\r\n\t\tsuper();\r\n\t\tthis.querySelectorAll('li'); // returns 0 nodes\r\n\t}\r\n\tasync connectedCallback() {\r\n\t\tthis.querySelectorAll('li'); // returns 0 nodes\r\n\t\tawait childrenLoaded(this);\r\n\t\tthis.querySelectorAll('li'); // returns 3 nodes\r\n\t}\r\n}\r\n\r\ncustomElements.define('my-custom-element', MyCustomElement, {extends: 'ul'});\r\n```\r\n\r\n```html\r\n<ul is=\"my-custom-element\">\r\n\t<li>item 1</li>\r\n\t<li>item 2</li>\r\n\t<li>item 3</li>\r\n</ul>\r\n```\r\n\r\n<a href=\"http://alexanderspirgel.com/children-loaded/demo\" target=\"_blank\">View a working demo →</a>\r\n\r\n## Alternative solutions\r\n\r\n### Extend native element with custom callback\r\n\r\nAnother way to address this problem is to extend a native element class with a custom callback. The underlying logic of the callback would be similar to that of the children loaded script, but instead of a separate function it would be an available callback method on the element class, similar to `connectedCallback`. In my opinion this approach constrains the versatility available to built-in web components, their ability to extend many native elements. With this approach you could either use one base element class or create custom versions of all extendable native elements. The html-parsed-element repository (<a href=\"https://github.com/WebReflection/html-parsed-element\" target=\"_blank\">https://github.com/WebReflection/html-parsed-element</a>) takes the base element class approach meaning you are able to use this repository for all elements that implement the `HTMLElement` class. This includes many elements, but not all. Some notable omissions are: `<a>`, `<button>`, `<div>`, and many more.\r\n\r\n### Wait for the entire page to load\r\n\r\nThis is commonly accomplished with callbacks such as the vanilla `DOMContentLoaded` document event listener or the jQuery `$('document').ready` function. Both of these solutions are sufficient, but they wait for the entire document to be loaded. The `childrenLoaded` function can be used to initialize these scripts as soon as only the minimum required elements for that script are loaded. This could be especially impactful for components that affect interactable content at the immediately visible section of a large webpage.\r\n","readmeFilename":"README.md"}