Как вы сказали в consumer-page
, вы пытаетесь получить доступ к элементу #sampleFileInput
, который является дочерним для другого компонента.
Все эти попытки:
var temp2 = this.$.sampleFileInput;
var temp3 = this.shadowRoot.querySelector("#sampleFileInput");
var temp4 = this.root.querySelector('#sampleFileInput');
var temp5 = this.$$('#sampleFileInput');
var test1 = Polymer.dom(this).querySelector("#sampleFileInput");
failпотому что вы пытаетесь получить доступ к элементу, которого нет внутри шаблона consumer-page
, в то время как эти:
var test7 = document.querySelector('sampleFileInput');
var test8 = document.querySelector('file-upload-page::shadow .FileUploadPage');
терпят неудачу соответственно, потому что document.querySelector()
не может выбрать внутри shadow dom и ::shadow
и /deep/
селекторы устарели ( см. Здесь ).
Технически вы должны иметь возможность выбрать #sampleFileInput
внутри consumer-page
таким образом:
this.parentElement // Goes back to iron-pages
.querySelector('file-upload-page') // Selects file-upload-page
.shadowRoot // Enters its shadow root
.querySelector('#sampleFileInput'); // Selects the file uploader
при доступеэлементы внутри теневого корня других пользователей считаются не очень хорошей практикой , не говоря уже о том, что если вы используете ленивую загрузку для iron-pages
страниц, произойдет сбой, если file-upload-page
не было загружено.
Вместо этого есть много других способов предоставления информации вне пользовательских элементов, таких как события или свойства.
Вы можете, если это может соответствовать вашей реализации, использовать компонент, содержащий iron-pages
, в качестве координатора вашей процедуры и использоватьатрПривязывает привязки, чтобы уведомить его с данными, которые ему нужны на разных страницах, когда пользователь продолжает заполнять.
IE в file-upload-page
привязывает URL загруженного файла к свойству и отслеживает его в родительском элементе:
<iron-pages>
<file-upload-page url="{{url}}"></file-upload-page>
<consumer-page></consumer-page>
</iron-pages>
<script>
class Parent extends PolymerElement {
// ...
static get properties() {
return {
url: {
type: String,
reflectToAttribute: true,
observer: '_urlChanged',
},
};
}
_urlChanged() {
console.log(this.url);
}
// ...
}
</script>