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');