Question

Polymer通过id提供对元素的访问。$ ['foo']。但是，我发现我无法通过嵌套模板中的id访问元素。

<template>
     <vaadin-dialog id="dialog" >
          <template>
     <work-order-new  id="workordernew" on-submitted="_onWorkOrderSubmitted"> </work-order-new>
          </template>
     </vaadin-dialog>
    </template>

在这种情况下，这个。$。对话框可以工作，但是。$ .workordernew没有。您是否能够通过id访问嵌套模板内的元素，如果是这样的话？

我也试过下面的两个方法，但它们也没有用。

Polymer.dom（this.root）.querySelector（）：

此。$$（选择器）

我看到了很多这个问题的答案，但没有一个能解决我的问题。

Answer 1

你所面临的问题并非严格意义上的聚合物问题，而是更多地反映了Vaadin正在做的事情。

创建vaadin-dialog元素时，模板的实际内容将复制到另一个元素 - vaadin-dialog-overlay中 - 而不是保留在原始元素中。

重叠元素在document级别插入，因此您可以抓住它来查询它：

let vaadinOverlay = document.querySelector('vaadin-dialog-overlay');

一旦你有了叠加层，它就很容易到达你的work-order-new元素：

let workOrder = vaadinOverlay.$.content.querySelector('#workordernew');

真正的问题是在这种情况下：你为什么要直接访问你的元素？

通常，在使用组件时，当需要直接访问组件时，通常可以很好地表明应用程序的设计存在缺陷。

＆＃13;

<base href="https://polygit.org/vaadin-dialog+vaadin+v1.0.0-alpha1/vaadin-button+vaadin+v1.0.0-alpha1/polymer+^2.0.0/components/">

<script src="webcomponentsjs/webcomponents-lite.js"></script>

<link rel="import" href="vaadin-dialog/vaadin-dialog.html">
<link rel="import" href="vaadin-button/vaadin-button.html">


<my-element></my-element>

<dom-module id="my-element">
  <template>
    <vaadin-dialog opened>
      <template>
        <work-order-new id="workorder"></work-order-new>
      </template>
    </vaadin-dialog>
  </template>
</dom-module>

<dom-module id="work-order-new">
  <template>
    <h4>Work Order</h4>
    <input type="text" id="inputbox" value="Default Value">
  </template>
</dom-module>

<script>
  // Extend Polymer.Element base class
  class MyElement extends Polymer.Element {
    static get is() {
      return 'my-element';
    }

    constructor() {
      super();
    }

    connectedCallback() {
      super.connectedCallback();

      /**
       * Fetch the reference to the overlay.
       **/
      let vaadinOverlay = document.querySelector('vaadin-dialog-overlay');
      
      /**
       * Fetch the reference to the `work-order-new` element.
       **/
      let workOrder = vaadinOverlay.$.content.querySelector('#workorder');

      /**
       * Wait for the overlay to be setup, this is just to show
       * that we can now use the reference to the `work-order-new`
       * element.
       **/
      setTimeout(() => {
        let inputBox = workOrder.$.inputbox;
        inputBox.value = `Changed from my-element`;
      }, 1500);
    }
  }

  customElements.define(MyElement.is, MyElement);

  class WorkOrderNewElement extends Polymer.Element {
    static get is() {
      return 'work-order-new';
    }

    constructor() {
      super();
    }

    connectedCallback() {
      super.connectedCallback();
    }
  }

  customElements.define(WorkOrderNewElement.is, WorkOrderNewElement);
</script>

＆＃13;

Answer 2

在聚合物3中，可以这样做

let vaadinOverlay = document.querySelector('vaadin-dialog-overlay');
let workorder = vaadinOverlay.$.content.shadowRoot.querySelector('#workorder');

通过Id在嵌套模板内部的Polymer 2.0访问元素

2 个答案: