App Layout

Is there a use-case for the container that lays out the various app elements? When considering a <nav-bar> , the conclusion was that a web component wasn’t necessary.

Possible Organization

The high-level picture is:

<body>
  <nav>
    <div id="topnav-banner">...</div>
    <ul id="topnav-items">...</ul>
  </nav>
  <div id="main_div">...</div>
  <footer>...</footer>
</body>

We should move #topnav-banner out of the <nav> so that we can potentially apply lateral spacing to #topnav-items and #main_div without it applying to #topnav-banner.

Server-Rendered EJS Does Not Support Blocks

The app currently uses EJS templates on the server. EJS does not specifically support blocks, but layouts can be implemented through includes, e.g.,

<%- include('header'); -%>
<h1>Title</h1>
<p>My page</p>
<%- include('footer'); -%>

I’ll need to implement the layout in the <body>’s CSS. At this point, a ShadowDOM doesn’t offer much use because there’s not anything that we need to isolate the <body> from.

References

EJS -- Embedded JavaScript templates. ejs.co . Accessed Apr 19, 2024.