feat: hide btns using shadow DOM
require Firefox >= 63, Chrome >= 53, Opera >= 40, Safari >= 10, or Chromium based Edge
This commit is contained in:
parent
13afe431c8
commit
8763e86c39
1 changed files with 12 additions and 1 deletions
13
src/btn.ts
13
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)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue