Polymer and Elm vdom mismatches

Question

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>

Submitted by HTML:

Pay attention to the blank swiper-node.

Interestingly, this happens when the application launches AND swiperis in the Old House.

However, if

• the application starts
• AND is swiperNOT in dom capacity
• And in some kind of custom event, it is swiperadded to the dom input

It is displayed correctly.

---

Going through this thread , I made the same configuration:

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

And in both cases:

• when the application starts with swiper
• when swiperadded later to custom event (click)

this is the processed html:

, swiper-node . U , dom ? , swiper-node, .

/ , js- Elm . , -.

Answer 1

content template, :

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

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

   <style>
   </style>

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

:: curl_up_and_cry::