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 [email protected].
For more options, visit https://groups.google.com/d/optout.
