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.

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

但是，如果

应用启动
并且 swiper 不在榆树中 dom
AND 在某些用户事件中，swiper 被添加到 elm dom

已正确呈现。

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

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

在这两种情况下：

当应用以 swiper
稍后在用户事件（点击）中添加 swiper 时

这是渲染后的 html:

虽然我们已经达成一致，但 swiper-node 并未呈现。你知道当你在检查器中悬停 dom 元素时，它如何在渲染 window 中突出显示吗？好吧，将鼠标悬停在 swiper-node 个子项上，什么也没有显示。

我只使用 Polymer abstraction/component 所以我可以很好地使用 Elm 中的 js 库。所以不要假设我有很好的 Polymer 或网络组件知识。

Answer 1

只需在 template 中添加 content 即可使组件变为：

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

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

   <style>
   </style>

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

::curl_up_and_cry::

Polymer 和 Elm vdom 不一致

Polymer and Elm vdom inconsistencies

web-component

elm

polymer

polymer-1.0