bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-12 06:13:38 +00:00
Code Issues Releases Wiki Activity

prevent pseudo-elements from being targeted and styled by host page's global rules (#16654)

Browse Source
This commit is contained in:
Jonathan Prusik
2025-10-07 15:38:49 -04:00
committed by GitHub
parent 1e56e7b151
commit b0179bd105
1 changed files with 28 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.ts
View File

@@ -237,8 +237,11 @@ export class AutofillInlineMenuContentService implements AutofillInlineMenuConte
} }
}, },
); );
this.buttonElement = globalThis.document.createElement(customElementName); this.buttonElement = globalThis.document.createElement(customElementName);
this.buttonElement.setAttribute("popover", "manual"); this.buttonElement.setAttribute("popover", "manual");
this.createInternalStyleNode(this.buttonElement);
} }
/** /**
@@ -264,8 +267,33 @@ export class AutofillInlineMenuContentService implements AutofillInlineMenuConte
} }
}, },
); );
this.listElement = globalThis.document.createElement(customElementName); this.listElement = globalThis.document.createElement(customElementName);
this.listElement.setAttribute("popover", "manual"); this.listElement.setAttribute("popover", "manual");
this.createInternalStyleNode(this.listElement);
}
/**
* Builds and prepends an internal stylesheet to the container node with rules
* to prevent targeting by the host's global styling rules. This should only be
* used for pseudo elements such as `::backdrop` or `::before`. All other
* styles should be applied inline upon the parent container itself.
*/
private createInternalStyleNode(parent: HTMLElement) {
const css = document.createTextNode(`
${parent.tagName}::backdrop {
background: none !important;
pointer-events: none !important;
}
${parent.tagName}::before, ${parent.tagName}::after {
content:"" !important;
}
`);
const style = globalThis.document.createElement("style");
style.setAttribute("type", "text/css");
style.appendChild(css);
parent.prepend(style);
} }
/** /**