CODEWITHSUNDEEP
javascripthtmlweb-component
chovy
chovy

Reputation: 75774

document is undefined when using a web component

        <script type="module" src="/scripts/navbar.js"></script>
<script>

            async function getContent(e) {
                e && e.preventDefault();
                const res = await fetch('https://briskreader.com/api/1/popular');
              const body = res.ok && await res.json();

                console.log('body', body);
                if (!body.length) return;

                let htm = '';

                for (link of body) {
                    htm += `<li>
                         <a href="/?url=${link.url}">${link.title}</a>
                         <div class="excerpt">${link.excerpt}</div>
                         <div class="date"><small>Added ${moment(link.created_at).format('MMMM Do YYYY, h:mm a')}</small></div> 
                         <div class="views"><small>${link.count || 1} views</small></div>
                    </li>`;
                }

                document.querySelector('ol.recent').innerHTML = htm; // this throws error
            }



            window.addEventListener('DOMContentLoaded', getContent, false);
</script>

The error:

Uncaught (in promise) TypeError: document.querySelector(...) is null
    getContent http://127.0.0.1:8080/popular.html:41
    async* http://127.0.0.1:8080/popular.html:45
popular.html:41:14
    getContent http://127.0.0.1:8080/popular.html:41
    InterpretGeneratorResume self-hosted:1482
    AsyncFunctionNext self-hosted:692
    (Async: async)
    <anonymous> http://127.0.0.1:8080/popular.html:45

Here's the component:

class NavBar extends HTMLElement {
    constructor(){
      super()
    }
  
    connectedCallback(){
      this.innerHTML = `
    <nav class="navbar">
        <a href="/recent.html">recent</a>
        <a href="/popular.html">popular</a>
        <a href="/index.html">home</a>
    </nav>
`
    }
  }

  customElements.define('nav-bar', NavBar)

Here's the markup:

    <body>
        <a href="/"><img id="logo" src="/logo.svg" alt="" border="0" /></a>
        <p style="margin: 0;">Bookmarklet: <a title="Drag to bookmark toolbar" href="javascript:(async() => {const url = window.location; window.location = `https://briskreader.com/?url=${url}`; })();">Brisk</a></p>
        <nav-bar/>
        <h1 id="title">Recent submissions</h1>
        <ol class="recent"></ol>
        <footer><small>&copy 2021 briskreader.com</small></footer>
    </body>

Upvotes: 0

Views: 386

Answers (1)

chovy
chovy

Reputation: 75774

it seems self-closing tags are the problem. If I change to it works

Upvotes: 1

Related Questions