使用 Owl Carousel 作为 Polymer 的自定义元素的问题答案

【问题标题】：Issues using Owl Carousel as a custom element with Polymer使用 Owl Carousel 作为 Polymer 的自定义元素的问题
【发布时间】：2015-01-20 19:00:00
【问题描述】：

我正在尝试使用 Polymer 将 Owl Carousel 合并到自定义 Web 组件中。我已经成功地做到了这一点，但是 Owl Carousel 的行为不正确。

当使用触摸或鼠标输入拖动轮播时，它会重置到开头。在 Polymer 自定义元素之外使用 Owl Carousel 可以正常工作。

假设我单击导航按钮以查看轮播中的项目 5、6、7，当我通过鼠标拖动或触摸时，轮播将重置为项目 1。

有人知道为什么会发生这个问题吗？

            <link rel="import" href="../polymer/polymer.html">
            <link rel="import" href="../core-toolbar/core-toolbar.html">
            <link rel="import" href="../core-header-panel/core-header-panel.html">
            <link rel="import" href="../core-icons/core-icons.html">
            <link rel="import" href="../paper-icon-button/paper-icon-button.html">
            <link rel="import" href="../paper-fab/paper-fab.html">
            <link rel="import" href="../paper-shadow/paper-shadow.html">

            <!--  jQuery 1.7+  -->
            <script src="../../jquery-2.1.1.min.js"></script>

            <!-- Include js plugin -->
            <script src="../../owl-carousel/owl.carousel.js"></script>


            <polymer-element name="my-element">
              <template>
                <style>

                  #owl .item{
                    background: #a1def8;
                    display: block;
                    color: #FFF;
                    -webkit-border-radius: 3px;
                    -moz-border-radius: 3px;
                    border-radius: 3px;
                    text-align: center;
                    width: 170px;
                    height: 200px;
                    margin: 0 auto;
                  }

                </style>

                <!-- Important Owl stylesheet -->
                <link rel="stylesheet" href="../../owl-carousel/owl.carousel.css">

                <!-- Default Theme -->
                <link rel="stylesheet" href="../../owl-carousel/owl.theme.css">

                  <div id="owl" class="owl-carousel owl-theme"></div>
              </template>
              <script>
                Polymer({
                  domReady: function() {
                    $(this.$.owl).owlCarousel({
                      jsonPath : "../../data.json",
                      navigation: true,
                      pagination: false
                    });
                  }
                });
              </script>
            </polymer-element>

【问题讨论】：

标签： polymer owl-carousel

【解决方案1】：

我已经得出结论，这是与 Shadow DOM 相关的问题。 Owl Carousel 与 Light DOM 一起使用，但将其包装在自定义元素中会将其移动到 Owl Carousel 无法正常运行的 Shadow DOM。

【讨论】：