-
Notifications
You must be signed in to change notification settings - Fork 87
Closed
Description
There's a workaround in place to handle when the button is used within a shadow DOM. This should ideally be fixed in pay.js. Once it is, this workaround should be removed.
google-pay-button/src/lib/button-manager.ts
Lines 346 to 373 in 5dfe00a
| // TODO(socsieng): #19 remove shadow DOM workaround when fixed in pay.js | |
| /** | |
| * workaround to get css styles into component | |
| */ | |
| private copyGPayStyles(): void { | |
| const node = this.element?.getRootNode(); | |
| if (node && node instanceof ShadowRoot) { | |
| const styles = document.querySelectorAll('head > style'); | |
| const gPayStyles = Array.from(styles).filter(s => s.innerHTML.indexOf('.gpay-button') !== -1); | |
| const existingStyles = new Set( | |
| Array.from(node.childNodes) | |
| .filter(n => n instanceof HTMLElement && n.nodeName === 'STYLE' && n.id) | |
| .map(n => (n as HTMLElement).id), | |
| ); | |
| let index = 0; | |
| for (const style of gPayStyles) { | |
| index++; | |
| const id = `google-pay-button-style-${index}`; | |
| if (!existingStyles.has(id)) { | |
| const styleElement = document.createElement('style'); | |
| styleElement.innerHTML = style.innerHTML; | |
| node.appendChild(styleElement); | |
| } | |
| } | |
| } | |
| } |
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels