使用 JQuery 访问 Polymer 创建的 DOM答案

【问题标题】：Accessing the Polymer created DOM with JQuery使用 JQuery 访问 Polymer 创建的 DOM
【发布时间】：2014-08-20 22:29:46
【问题描述】：

我是使用 Polymer 的新手，我正在尝试通过 jQuery 访问新自定义元素的 DOM，但没有成功。

我正在尝试通过 domReady 方法访问元素，此时元素的初始子集保证存在。

非常感谢任何帮助！

自定义元素：

<template>

    <link rel="stylesheet" href="seed-element.css" />
    <style>
        .hero-slider { max-width: 1440px; }
    </style>

    <content>

        <section class="hero-slider">
            <div class="iosSlider">        
              <div class="slider">

                 <div class="item">
                     <img src="img/imageTest1.jpg" alt="IMAGE TEST 1">
                 </div>
                 <div class="item">
                   <img src="img/imageTest5.jpg" alt="IMAGE TEST 5">
                 </div>

              </div>
           </div>
      </section>

    </content>

</template>

<script>

Polymer('seed-element', {

    domReady: function() {
    var shadowRoot = $(this.shadowRoot || this);
    var iosSliderElement = shadowRoot.find('.iosSlider');

    iosSliderElement.iosSlider({
        snapToChildren: true,
        desktopClickDrag: true,
        keyboardControls: true,
        scrollbar: true,
        scrollbarDrag: true,
        scrollbarHide: false,
        scrollbarLocation: 'bottom',
        scrollbarBackground: '#000000',
        scrollbarOpacity: '1',
        scrollbarBorderRadius: '0'
    });
    }
});

</script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.iosslider.js"></script>

HTML：

<head>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
    <title>seed-element Demo</title>
    <script src="../../platform/platform.js"></script>
    <link rel="import" href="seed-element.html">
</head>
<body unresolved>
    <seed-element></seed-element>
</body>

【问题讨论】：

我不能肯定地说，因为你没有包括一个例子，但我猜这个问题与你不能从 Polymer 元素外部的脚本访问该元素的 Shadow DOM。
感谢您的回复。我正在尝试创建一个滑块元素。一旦加载了 DOM，就会调用 jQuery 插件（所有文件都在自定义元素中），但我仍然无法访问任何子节点。知道如何访问它们吗？
很遗憾，我对 Polymer 不是很熟悉，所以不知道如何回答。我建议您编辑您的帖子以包含您的代码当前外观的Minimal, Complete, and Verifiable example，以便其他比我更熟悉 Polymer 的人能够更好地帮助您。

标签： jquery polymer web-component shadow-dom

【解决方案1】：

您的问题的快速解决方案可能是这样的：

Polymer('seed-element', {

  domReady: function() {
    var shadowRoot = this.shadowRoot || this;
    var iosSliderElement = $(shadowRoot.querySelector('.iosSlider'));

    iosSliderElement.iosSlider({
      snapToChildren: true,
      desktopClickDrag: true,
      keyboardControls: true,
      scrollbar: true,
      scrollbarDrag: true,
      scrollbarHide: false,
      scrollbarLocation: 'bottom',
      scrollbarBackground: '#000000',
      scrollbarOpacity: '1',
      scrollbarBorderRadius: '0'
    });
  }
});

一个不使用付费 iosSlider 库的 jsbin：http://jsbin.com/foyodevu/2/edit

你看，domReady 会为页面中的每个 <seed-element> 调用，一旦该元素被插入到 DOM 并准备好与它的子元素交互，所以你不应该寻找每个种子 - domReady 中的元素，因为您可能只关心this，这是您新创建的种子元素。

其他一些注意事项

$((this.shadowRoot || this).querySelector('.iosSlider')) 是查询 Polymer 元素的 Shadow DOM 的好方法。另一种选择是给元素一个id，然后你可以this.$.theElementsId。
在上面的示例代码中，您使用了<content> 节点。请注意，该元素类型在 shadow dom 中具有特殊含义，可能不是您想要的。 <content> 节点允许 Web 组件的用户混合 light dom 和 shadow dom。更多信息请看这篇文章：http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/#toc-separation-separate
我推荐一个更像projectName-elementDescription 的名字，比如paper-input。也许jquery-iosslider？

【讨论】：

嗨彼得，非常感谢您的反馈。不幸的是，我仍然发现页面上不存在 iosslider 元素（当我控制台日志显示为 length = 0 时）。很抱歉，我现在已经包含了完整的代码。
嗨@user3790289，我已经看过了，我想我现在已经开始工作了。 jQuery.find() 不再工作了，虽然我相信它以前有过。我不确定变化是在平台还是 jquery 中，但幸运的是 querySelector 和 querySelectorAll 这些天非常快速和成熟。
嗨@PeterBurns。抱歉，我还有一个与影子 dom 相关的问题。滑块插件 iosslider 将滚动条 div 附加到滑块容器，但遗憾的是没有添加所需的任何功能和内联样式（在聚合物外部使用时它工作正常）。你知道我在这方面缺少什么吗？
这可能是 iosslider 中的一些东西不能很好地处理影子 dom，但没有更多信息我不能说。考虑向 iosslider 开发人员提交错误。该库是否提供支持？
是的，我已经与他们联系过，一旦我知道解决办法，我会发布答案。感谢您的帮助。

【解决方案2】：

我创建了一个 jquery-polymer 插件，它有很多功能可以帮助你处理聚合物阴影 dom

https://github.com/digital-flowers/jquery-polymer

选择聚合物元素内的任何元素让我们说

<my-button id='button1'></my-button>

首先您需要使用获取按钮阴影根目录

$("#button1").getShadowRoot()

这会将按钮阴影根作为 jquery 对象返回，然后您可以选择其中的任何内容，例如

$("#button1").getShadowRoot().find("ul > li:first")

在您的示例中，您也可以在聚合物组件中使用它

$(this).getShadowRoot().find("li:first")

请注意，这个插件和另一个名为 jquery-ui-polymer 的插件修复了许多 jquery 和 jquery ui 与聚合物项目的兼容性问题

https://github.com/digital-flowers/jquery-polymer

https://github.com/digital-flowers/jquery-ui-polymer

干杯 ;)

【讨论】：