From 8763e86c391f83bcad2dbcdbc56d4bd0a76ec55e Mon Sep 17 00:00:00 2001
From: Xmader <xmader@outlook.com>
Date: Sat, 7 Nov 2020 21:28:32 -0500
Subject: [PATCH] feat: hide btns using shadow DOM

require Firefox >= 63, Chrome >= 53, Opera >= 40, Safari >= 10, or Chromium based Edge
---
 src/btn.ts | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/btn.ts b/src/btn.ts
index 717c7f7..2475280 100644
--- a/src/btn.ts
+++ b/src/btn.ts
@@ -93,7 +93,18 @@ export class BtnList {
    * replace the template button with the list of new buttons
    */
   commit (): void {
-    this.templateBtn.replaceWith(...this.list)
+    const parent = this.templateBtn.parentElement as HTMLDivElement
+    const shadow = parent.attachShadow({ mode: 'closed' })
+
+    // style the shadow DOM from outside css
+    document.head.querySelectorAll('style').forEach(s => {
+      shadow.append(s.cloneNode(true))
+    })
+
+    // hide buttons using the shadow DOM
+    const newParent = parent.cloneNode(false) as HTMLDivElement
+    newParent.append(...this.list)
+    shadow.append(newParent)
   }
 }