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:
<https://lh3.googleusercontent.com/-eAx8wFO_rYI/WG_FsXLua6I/AAAAAAAAKqE/2OEMqhm-JF0hUQqAb3NZe2LcP77OskPIwCLcB/s1600/Screen%2BShot%2B2017-01-06%2Bat%2B17.27.59.png>
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:
https://groups.google.com/forum/#!msg/elm-discuss/8Q2xwRh6UYc/tGem48QjAQAJ
I did the same configuration of:
window.Polymer = {
dom: 'shadow',
lazyRegister: true
};
And in both cases:
- app starts with `swiper`
- `swiper` is added later
here is the rendered HTML:
<https://lh3.googleusercontent.com/-VkzQpjmMeIw/WG_InfKOJZI/AAAAAAAAKqc/hRcj0lM1uREWpKMyY_oW6Ij7lA2p8tc_gCLcB/s1600/Screen%2BShot%2B2017-01-06%2Bat%2B17.40.33.png>
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 in a nice way. So don't assume great Polymer or web-components
knowledge on my end.
--
You received this message because you are subscribed to the Google Groups "Elm
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
