Полимерные и 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 находится в доме Вязов.

Однако, если

1. приложение начинает
2. И в swiper НЕ в вязе йоте
3. И на каком-то событии пользователя, swiper добавляется к вязу йоту

он отображается правильно.

---

После прохождения this thread, я сделал то же конфигурацию:

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

И в обоих случаях:

• когда приложение начинается с swiper
• когда swiper добавляется позже по событию пользователя (щелкните)

это просчитанный HTML:

Altho мы достигли согласованности, то swiper-node не обрабатывается. U знаете, как при наведении элемента dom в инспекторе он выделяется в окне рендеринга? Ну, паря на любом из детей swiper-node, ничего не показывает.

Я использую только абстракцию/компонент полимера, поэтому я могу использовать библиотеку js в Elm красивым способом. Поэтому не ожидайте отличных знаний о Polymer или веб-компонентах на моем конце.

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