Search code examples
polymerpolymer-1.0web-componentelm

Polymer and Elm vdom inconsistencies

Given:

swiper =
     div []
         [ node "swiper-node"
             [ class "block" ]
             [ div [ id "swiperContainer" ]
                 [ div [ class "swiper-wrapper" ]
                     [ div [ class "swiper-slide", style [ ( "height", "400px" ), ( "background", "gray" ) ] ] [ text "slide1" ]
                     , div [ class "swiper-slide", style [ ( "height", "400px" ), ( "background", "gray" ) ] ] [ text "slide2" ]
                     , div [ class "swiper-slide", style [ ( "height", "400px" ), ( "background", "gray" ) ] ] [ text "slide3" ]
                     , div [ class "swiper-slide", style [ ( "height", "400px" ), ( "background", "gray" ) ] ] [ text "slide4" ]
                     ]
                 ]
             ]
         ]

<dom-module id="swiper-node">

   <template></template>

   <style>
   </style>

   <script>
     (function () {
       Polymer({
         is: 'swiper-node',
       });
     }());
   </script>
</dom-module>

The rendered HTML is:

enter image description here

Notice the empty swiper-node.

The interesting thing is that this happens when the app starts AND swiper is IN the Elm dom.

However, if

  1. the app starts
  2. AND the swiper is NOT in the elm dom
  3. AND on some user event, the swiper is added to the elm dom

it's rendered correctly.

After going through this thread, I did the same configuration of:

 window.Polymer = {
   dom: 'shadow',
   lazyRegister: true
 };

And in both cases:

  • when app starts with swiper
  • when swiper is added later on user event (click)

this is the rendered html:

enter image description here

Altho we've reached consistency, the swiper-node is not being rendered. U know how when you hover a dom element in the inspector, it highlights in the render window? Well, hovering on any of the swiper-node children, shows nothing.

I'm only utilizing Polymer abstraction/component so i can utilize a js library within Elm in a nice way. So don't assume great Polymer or web-components knowledge on my end.

Solution

  • Just add content inside the template so that the component becomes:

    <dom-module id="swiper-node">

   <template><content></content></template>

   <style>
   </style>

   <script>
     (function () {
       Polymer({
         is: 'swiper-node',
       });
     }());
   </script>
</dom-module>

    ::curl_up_and_cry::