From 11fe9b7e23e0e95fa09262e094ceba531e21d324 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Fri, 12 Apr 2024 11:05:05 +0800
Subject: [PATCH] Make elements in WebC components override the component names

---
 src/_includes/main/header-main.webc | 4 ++--
 src/_includes/main/navbar.webc      | 6 +++---
 src/_includes/main/site-btn.webc    | 2 +-
 src/_includes/main/top-btn.webc     | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/_includes/main/header-main.webc b/src/_includes/main/header-main.webc
index e1660021..9b60ecdf 100644
--- a/src/_includes/main/header-main.webc
+++ b/src/_includes/main/header-main.webc
@@ -1,4 +1,4 @@
-<header class="main-header">
+<header webc:root="override" class="main-header">
     <noscript>
         JavaScript is disabled in your browser. To get the best user experience on
         this website, it is recommended that you enable it.
@@ -10,7 +10,7 @@
 </header>
 
 <style webc:keep webc:bucket="defer">
-    header-main {
+    .main-header {
         width: 100%;
         background-color: var(--clr-main-header-bg);
         display: flex;
diff --git a/src/_includes/main/navbar.webc b/src/_includes/main/navbar.webc
index 6adde9dd..d5c609aa 100644
--- a/src/_includes/main/navbar.webc
+++ b/src/_includes/main/navbar.webc
@@ -1,4 +1,4 @@
-<nav class="navbar">
+<nav webc:root="override" class="navbar">
     <ul class="nav__menu">
         <li><a href="/home">Home</a></li>
         <li><a href="/about/">About</a></li>
@@ -14,7 +14,7 @@
 </nav>
 
 <style webc:keep webc:bucket="defer">
-    navbar {
+    .navbar {
         background: var(--clr-navbar-bg);
         padding: 0 0.6rem;
         width: 100%;
@@ -64,7 +64,7 @@
     // Make the navigation bar sticky
 
     // const header = document.querySelector(".main-header");
-    const navbar = document.querySelector("navbar");
+    const navbar = document.querySelector(".navbar");
     window.addEventListener("scroll", e => {
         const scrollPos = window.scrollY || document.documentElement.scrollTop;
         const stickyLine = document.querySelector(".main-header").scrollHeight - navbar.scrollHeight;
diff --git a/src/_includes/main/site-btn.webc b/src/_includes/main/site-btn.webc
index ce7bc15e..c222b1d9 100644
--- a/src/_includes/main/site-btn.webc
+++ b/src/_includes/main/site-btn.webc
@@ -1,4 +1,4 @@
-<div class="site-btn__container">
+<div webc:root="override" class="site-btn__container">
     <div>
         <a href="https://leilukin.neocities.org/" target="_blank"><img src="/assets/leilukin/Leilukins-Hub-button.png" alt="Button of Leilukin's Hub" title="Leilukin's Hub"></a>
     </div>
diff --git a/src/_includes/main/top-btn.webc b/src/_includes/main/top-btn.webc
index e0e1da5e..10ab271c 100644
--- a/src/_includes/main/top-btn.webc
+++ b/src/_includes/main/top-btn.webc
@@ -1,4 +1,4 @@
-<button class="top-btn hidden" aria-label="Scroll to top">
+<button webc:root="override" class="top-btn hidden" aria-label="Scroll to top">
     <img src="/assets/images/elements/top.svg" alt="">
 </button>