Polymer and Elm vdom inconsistencies - polymer

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>
The rendered HTML is:
Notice the empty swiper-node.
The interesting thing is that this happens when the app starts AND swiper is IN the Elm dom.
However, if
the app starts
AND the swiper is NOT in the elm dom
AND on some user event, the swiper is added to the elm dom
it's rendered correctly.
After going through this thread, I did the same configuration of:
window.Polymer = {
dom: 'shadow',
lazyRegister: true
};
And in both cases:
when app starts with swiper
when swiper is added later on user event (click)
this is the rendered html:
Altho we've reached consistency, the swiper-node is not being rendered. U know how when you hover a dom element in the inspector, it highlights in the render window? Well, hovering on any of the swiper-node children, shows nothing.
I'm only utilizing Polymer abstraction/component so i can utilize a js library within Elm in a nice way. So don't assume great Polymer or web-components knowledge on my end.

Answer 1

Just add content inside the template so that the component becomes:
<dom-module id="swiper-node">
<template><content></content></template>
<style>
</style>
<script>
(function () {
Polymer({
is: 'swiper-node',
});
}());
</script>
</dom-module>
::curl_up_and_cry::