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

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>

Dec 28 '17 00:12 ntilwalli

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.

Jul 17 '18 08:07 leuchtetgruen

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.

Aug 23 '18 22:08 chazsconi

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

Dec 30 '18 13:12 blawlor

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.

Dec 30 '18 16:12 blawlor