聚合物和榆树的不一致

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。

有趣的是，当应用程序启动时会发生这种情况，并且swiper位于Elm dom中。

但是，如果

1. 应用程序启动
2. 并且swiper不在榆树下
3. 在某些用户事件中，swiper已添加到elm dom

它正确呈现。

完成this thread后，我做了相同的配置：

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

在这两种情况下：

• 当应用以swiper
开头时
• 稍后在用户事件（点击）
上添加swiper时

这是渲染的html：



虽然我们已达到一致性，但swiper-node尚未呈现。你知道当你在检查器中悬停一个dom元素时，它会在渲染窗口中突出显示吗？好吧，徘徊在任何swiper-node个孩子身上，什么都不显示。

我只使用Polymer抽象/组件，所以我可以很好地利用Elm中的js库。因此，不要在我的最后承担伟大的聚合物或网络组件知识。

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