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.

Sign up for GitHub

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

Jump to bottom

google-map-poly can't be created dynamically #411

Open
ntilwalli opened this issue Dec 28, 2017 · 4 comments · May be fixed by #439
Open

google-map-poly can't be created dynamically #411

ntilwalli opened this issue Dec 28, 2017 · 4 comments · May be fixed by #439

Comments

@ntilwalli
Copy link

The below code throws the error: Uncaught DOMException: Failed to construct 'CustomElement': The result must not have attributes. Does anyone know why?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="/bower_components/google-map/google-map-poly.html">
  </head>
  <body>
    <script>
      document.createElement('google-map-poly')
    </script>
  </body>
</html>
@leuchtetgruen
Copy link

leuchtetgruen commented Jul 17, 2018 •
edited

I'm experiencing the same problem. I'm using the google map webcomponent in a vaadin project in which elements are created dynamically by default.

I get the same error message and haven't found a workaround yet.

@chazsconi
Copy link

I also have this issue in Chrome, but in Firefox it is fine, presumably because it is using the Polyfill which allows this whereas in Chrome it is using the native implementation.

@blawlor
Copy link

blawlor commented Dec 30, 2018

Confirming this problem, which prevents this component from being used in an Elm context.

@blawlor
Copy link

blawlor commented Dec 30, 2018

From what I can see, the google-map-poly component is making one of the errors as described here:
https://stackoverflow.com/questions/43836886/failed-to-construct-customelement-error-when-javascript-file-is-placed-in-head

i.e. it's setting an attribute value during creation.

In this case, the attribute is 'draggable' which seems to be of a different nature ('native'?) to some of the other properties. Setting this value during construction was throwing the exception shown in the link above and preventing the shadow root from being created. By removing this from the list of properties, the value is no longer set during construction. I don't know if this is the definitive solution, but I will create a PR for it so that the fix/workaround can at least be examined.

blawlor pushed a commit to blawlor/google-map that referenced this issue Dec 30, 2018
@blawlor-8west
Remove 'draggable' from gogle-map-ploy properties.
e019dae 
Fixes GoogleWebComponents#411
@blawlor blawlor linked a pull request Dec 30, 2018 that will close this issue
Open
blawlor added a commit to blawlor/google-map that referenced this issue Dec 30, 2018
@blawlor @blawlor-8west
Remove 'draggable' from gogle-map-ploy properties.
f4abba3 
Fixes GoogleWebComponents#411
mlopezFC added a commit to FlowingCode/google-map that referenced this issue May 19, 2020
@mlopezFC
Applied the fix for: GoogleWebComponents#411
15c326d
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Remove 'draggable' from google-map-poly properties. blawlor/google-map
4 participants
@blawlor @leuchtetgruen @chazsconi @ntilwalli