在过去的几个小时中，我一直在努力在Polymer项目中引用同级元素。想象一下以下设置：
/* main.html */
<link rel="import" href="siblingA.html">
<link rel="import" href="siblingB.html">
<polymer-element name="app-main">
<template>
<app-siblingA></app-siblingA>
<app-siblingB></app-siblingB>
</template>
<script type="application/dart" src="main.dart"></script>
</polymer-element>
/* siblingA.html, nothing special about it */
<polymer-element name="app-siblingA">
<template>
<button on-click="{{doSomething))">Do something</button>
</template>
<script type="application/dart" src="siblingA.dart"></script>
</polymer-element>
/* siblingA.dart */
import 'package:polymer/polymer.dart';
import 'dart:html';
@CustomTag('app-siblingA')
class SiblingA extends PolymerElement {
bool get applyAuthorStyles => true;
SiblingA.created() : super.created() {
}
void doSomething(MouseEvent e, var detail, Node target) {
var profile = document.querySelector('app-siblingB');
print(profile); // This is always null, why?
}
}
现在我可以app-main从文档中获取节点，但是无法获取同级元素。我尝试过通过兄弟姐妹元素shadowRoot获得成功。
在这种情况下app-siblingB，如何从document或获取同级元素shadowRoot？
您的兄弟姐妹在的shadowDOM中<app-main>。document.querySelector()不会到达元素的shadowDOM。
这应该工作
(parentNode as ShadowRoot).querySelector('app-siblingB');
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句