Dart Web组件如何获得对其子组件的引用？

出于说明的原因，我创建了一个从WebComponent继承而来的名为FancyOption的类，该类在单击另一个子元素时会更改为一个子元素中文本指定的背景色

import'package:web_ui/web_ui.dart'；
导入“dart:html”；
类FancyOptionComponent扩展了WebComponent{
按钮元素\u按钮；
TextInputElement_textInput；
FancyOptionComponent（）{
//获取对按钮元素的引用
//获取对文本元素的引用
//失败的尝试
//_button=this.query（'.fancy option button'）；
//错误：错误状态：尚未设置主机元素。（不知道）
//将此web组件的背景色设置为指定的颜色
final changeColorFunc=（e）=>this.style.backgroundColor=\u textInput.value；
_按钮.onClick.listen（changeColorFunc）；
}
}

FancyOption HTML：

点击我！

我有三个这样的页面

示例应用程序
在花式选项文本框中键入颜色名称，按下按钮并
看看会发生什么！

只需使用

getShadowRoot（）

并对其进行查询：

import'package:web_ui/web_ui.dart'；
导入“dart:html”；
类FancyOptionComponent扩展了WebComponent{
按钮元素\u按钮；
TextInputElement_textInput；
插入（）{
//获取参考资料
_button=getShadowRoot（'x-fancy-option'）。查询（'.fancy-option button'）；
_textInput=getShadowRoot（'x-fancy-option'）。查询（'.fancy-option-text'）；
//将此web组件的背景色设置为指定的颜色
final changeColorFunc=（e）=>this.style.backgroundColor=\u textInput.value；
_按钮.onClick.listen（changeColorFunc）；
}
}

其中

x-option

string是元素的名称

---

注意：我将您的构造函数更改为

inserted（）

method，。

我知道_root已被删除。答案建议_root应该使用getShadowRoot（）来代替_root。

我试过了。它不会崩溃，但现在不会渲染组件。它给出警告：“_root”不是FancyOptionComponent的成员”。sdk版本0.4.4.4_r20810Oh，现在我知道为什么了。您应该在

inserted（）

中执行逻辑，而不是在构造函数中。我会更新我的答案。太棒了。成功了。有趣的是，_root仍然会发出警告，但是程序的行为是我想要的，所以我很满意。谢谢，凯，太好了。谢谢你的意见。