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

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-而不是停留在原来的元素.

overlay元素是在document级别插入的,因此你可以抓住它来查询它:

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

一旦你有了叠加层,就很容易找到你的work-order-new元素:

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

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

通常,在使用组件时,到达需要直接访问组件的位置通常表明应用程序的设计存在缺陷.

<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>