/* it's necessary to make accessible count variable and showLoader function to parent */
        <svelte:options accessors />

        <script>
          /* to make it accessible to parent we need to export this variable */
          export let count = 0;
          /* to make it accessible to parent we need to export this function */
          export function showLoader() {
            const loader = document.querySelector("oa-loader");
            loader.show();
            count++;
            setTimeout(() => {
              loader.hide();
            }, 2000);
          }
          const showGlobalLoader = () => {
            /* and here the loader is invoked through the global declaration window.app = {...} */
            window.app.loader.show();
            count++;
            setTimeout(() => {
              window.app.loader.hide();
            }, 2000);
          };
        </script>
      

        <template>
          ...
          <Counter bind:this={myCounter} />
          ...
        </template>

        <script>
        import logo from "./assets/svelte.png";
        import Counter from "./lib/Counter.svelte";
      
        let myCounter;
      
        const showLoader = () => {
          /* here the loader is invoked through the global declaration window.app = {...} */
          window.app.loader.show();
          /* we can access to the child component data property: count, via binding + exported variable and function */
          myCounter.count++;
          setTimeout(() => {
            window.app.loader.hide();
          }, 1000);
        };
        const callLoaderFromComponent = () => {
          /* here the loader is invoked through the Counter component */
          myCounter.count++;
          myCounter.showLoader();
        };
        </script>