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

add global styles in the shadow root #437

Closed
wants to merge 1 commit into from

Conversation

dakotaJang
Copy link

The main reason why the styles are failing is because the styles for google map are added in the head of the document where google map api is called.
The this.$.map is defined in the shadow-root where the styles are encapsulated, therefore the styles are not applied.

When google maps api changed from version 3.34 to 3.35, they added 2 more img tags for each buttons and the global styles were suppose to handle the overlay.

The one way to fix this is to copy the style nodes into the shadow root of the google-map web component.

I added a mutation observer when the web component has been attached to observe the head of the document. When the style node that contains the text gm- is added then the node gets copied the shadow root.

This should also fix other problems that arises that depends on global styles.

Resolves #435 and #423 and other issues that arises from global styles not cascading down into shadow-root.

@dakotaJang
Copy link
Author

Issue no longer persists #435

@dakotaJang dakotaJang closed this Jul 25, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Image inside the buttons are being rendered three times
2 participants