ID嵌套模板中的Polymer 2.0访问元素

Question

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

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

在这种情况下，this。$。dialog有效，但this。$。workordernew不起作用。 您是否可以通过ID访问嵌套模板中的元素，如果可以，如何访问？

我还尝试了以下两种方法，但它们也都没有用。

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

此。$$（选择器）

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

Answer 1

您面临的问题并非严格地是Polymer问题，而更多地反映了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> 

Answer 2

在Polymer 3中，可以这样完成

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