#100DAYSOFCODE Day94

Add recent blog posts on my personal website

Try to change personal website codes separate to components, but it doesn't connect with the CSS library linked in HTML.

console.log("run")
index.mjs:
import MyNav from "./components/MyNav.mjs"
class MyApp extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: "open" })
    this.render()
  }
  render() {
    const nav = document.createElement("my-nav")
    // const header = document.createElement("my-header")
    // const portfolio = document.createElement("my-portfolio")
    // const blog = document.createElement("my-blog")
    // const contact = document.createElement("my-contact")
    // const footer = document.createElement("my-footer")
    this.shadowRoot.appendChild(nav)
  }
}
window.customElements.define("my-app", MyApp)
window.customElements.define("my-nav", MyNav)

MyNav.mjs:
export default class MyNav extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: "open" })
    this.render()
  }
  render() {
    const nav = document.createElement("nav")
    nav.innerHTML = this.code()
    nav.className = "navbar navbar-expand-lg bg-secondary text-uppercase fixed-top"
    nav.setAttribute("id", "mainNav")
    this.shadowRoot.appendChild(nav)
  }
  code() {
    return `
        <div class='container'>
          <a class='navbar-brand js-scroll-trigger' href='#page-top'>
            Haorong
          </a>
          <button
            data-toggle='collapse'
            data-target='#navbarResponsive'
            class='navbar-toggler text-white bg-primary navbar-toggler-right text-uppercase rounded'
            aria-controls='navbarResponsive'
            aria-expanded='false'
            aria-label='Toggle navigation'
          >
            <i class='fa fa-bars'></i>
          </button>
          <div class='collapse navbar-collapse' id='navbarResponsive'>
            <ul class='navbar-nav ml-auto'>
              <li class='nav-item mx-0 mx-lg-1'>
                <a class='nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger' href='#portfolio'>
                  Portfolio
                </a>
              </li>
              <li class='nav-item mx-0 mx-lg-1'>
                <a class='nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger' href='#about'>
                  About
                </a>
                <a class='nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger' href=''></a>
              </li>
              <li class='nav-item mx-0 mx-lg-1'>
                <a class='nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger' href='#blog' target='_blank'>
                  Blog
                </a>
              </li>
              <li class='nav-item mx-0 mx-lg-1'>
                <a
                  class='nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger'
                  href='#contact'
                  style='color: rgb(255, 255, 255)'
                >
                  Contact
                </a>
              </li>
            </ul>
          </div>
        </div>
`
  }
}