Polymer 和 Elm vdom 不一致

Question

鉴于:

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>

呈现的 HTML 是:



注意空 swiper-node .

有趣的是，这发生在应用程序启动 AND swiper 时。是在榆树dom。

然而，如果

应用程序启动

和 swiper不在 elm dom

并且在某些用户事件中，swiper添加到 elm dom

它正确呈现。

经过this thread ，我做了相同的配置:

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

在这两种情况下:

当应用以 swiper 开头时

当swiper稍后在用户事件(单击)上添加

这是呈现的 html:



尽管我们已经达到了一致性，swiper-node没有被渲染。你知道当你在检查器中悬停一个 dom 元素时，它是如何在渲染窗口中突出显示的吗？好吧，悬停在任何 swiper-node 上 children ，什么都没有显示。

我只使用 Polymer 抽象/组件，所以我可以很好地利用 Elm 中的 js 库。所以不要假设我对 Polymer 或 web-components 有很好的了解。

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::