Stencil Component Method definition

I am facing a problem developing a stencil.js web component. I have this error:

(index):28 Uncaught TypeError: comp.hideDataPanel is not a function at HTMLDocument. ((index):28)

I want to integrate my stencil component to a bigger browserify project

Before doing that I am trying the following index.html with the stencil server-dev

    <!DOCTYPE html>
    <html dir="ltr" lang="en">
      <meta charset="utf-8">
      <title>Advanced SearchBar</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
      <meta name="theme-color" content="#16161d">
      <meta name="apple-mobile-web-app-capable" content="yes">

      <meta http-equiv="x-ua-compatible" content="IE=Edge"/>
      <script src="/build/app.js"></script>

      <link rel="stylesheet" href=""> <!-- Added -->
      <link rel="manifest" href="/manifest.json">

      <advanced-searchbar target_url="http://localhost:1234/results" target_id="pdbCode"></advanced-searchbar>

        document.addEventListener("DOMContentLoaded", function(event) {
          let comp = document.getElementsByTagName('advanced-searchbar')[0];
          comp.hideDataPanel(); // --> Does not work all the time

        let comp = document.getElementsByTagName('advanced-searchbar')[0];
          comp.hideDataPanel(); // --> Works Fine

Methods of my component appear to be unresolved at the DomContentLoaded event while, the same method is resolved at the asychronous user click event. Note that user can use .hideDataPanel() method thanks to @Method() inside typescript code (as shown here:

For the purpose of future integration I would like to bind my stencil component method at the startup of my web application. How do i do that ? Shall i wait for a particular event in the page or component lifecycle for component method to be resolved ?

Thank you in advance