Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove shadow DOM workaround when fixed in pay.js #19

Closed
socsieng opened this issue Jun 18, 2020 · 0 comments · Fixed by #50
Closed

Remove shadow DOM workaround when fixed in pay.js #19

socsieng opened this issue Jun 18, 2020 · 0 comments · Fixed by #50

Comments

@socsieng
Copy link
Collaborator

socsieng commented Jun 18, 2020

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.

// 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);
}
}
}
}

@socsieng socsieng changed the title remove shadow DOM workaround when fixed in pay.js Remove shadow DOM workaround when fixed in pay.js Jun 18, 2020
socsieng pushed a commit to socsieng/google-pay-button that referenced this issue Oct 31, 2020
socsieng pushed a commit to socsieng/google-pay-button that referenced this issue Nov 11, 2020
socsieng pushed a commit that referenced this issue Nov 11, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant