no children item

src/devtools.ts

@@ -1,7 +1,8 @@
 import browser from "webextension-polyfill";
 
-
 console.log("Hello from devtools!");
-browser.devtools.panels.elements.createSidebarPane("My Sidebar").then((sidebar) => {
+browser.devtools.panels.elements.createSidebarPane("Copy Panel").then((sidebar) => {
     sidebar.setPage("src/sidebar.html");
+}).catch((error) => {
+    console.error("Error creating sidebar:", error);
 });

src/popup.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import Popup from "./pages/Popup";
 
+console.log("Hello from popup!");
 ReactDOM.createRoot(document.querySelector("#app")!).render(
   <React.StrictMode>
     <Popup />

src/sidebar.tsx

@@ -170,7 +170,7 @@ const HTMLComponentTable: { [key: string]: keyof JSX.IntrinsicElements } = {
     "center": "center",
     "cite": "cite",
     "code": "code",
-    "col": "col",
+    // "col": "col",
     "colgroup": "colgroup",
     "data": "data",
     "datalist": "datalist",
@@ -203,7 +203,7 @@ const HTMLComponentTable: { [key: string]: keyof JSX.IntrinsicElements } = {
     "i": "i",
     // "iframe": "iframe",
     // "img": "img",
-    "input": "input",
+    // "input": "input",
     "ins": "ins",
     "kbd": "kbd",
     "keygen": "keygen",
@@ -269,12 +269,35 @@ const HTMLComponentTable: { [key: string]: keyof JSX.IntrinsicElements } = {
     "wbr": "wbr",
     "webview": "webview",
 }
+const HTMLNonCHildrenComponentTable: { [key: string]: keyof JSX.IntrinsicElements } = {
+    "input": "input",
+    "img": "img",
+    "meta": "meta",
+    "link": "link",
+    "base": "base",
+    "area": "area",
+    "col": "col",
+    "embed": "embed",
+    "param": "param",
+    "source": "source",
+    "track": "track",
+    "br": "br",
+    "hr": "hr",
+    "wbr": "wbr",
+    "abbr": "abbr",
+}
 
 function VnodeToReact({ vnode }: { vnode: VNode }): React.ReactNode {
     if (vnode.type === "text") {
         return vnode.text;
     }
     else if (vnode.type === "element") {
+        if (HTMLNonCHildrenComponentTable[vnode.tagName]) {
+            const Tag = HTMLNonCHildrenComponentTable[vnode.tagName] ?? "div";
+            const style = vnode.style;
+            
+            return <Tag style={htmlStyleToReactStyle(style)} />;
+        }
         // TODO: support svg
         const Tag = HTMLComponentTable[vnode.tagName] ?? "div";
         const style = vnode.style;