How can a Dart Web Component obtain a reference to its children?
dart, dart-webui
Solution
Just use `getShadowRoot()` and query against it:
import 'package:web_ui/web_ui.dart';
import 'dart:html';
class FancyOptionComponent extends WebComponent {
ButtonElement _button;
TextInputElement _textInput;
inserted() {
// obtain references
_button = getShadowRoot('x-fancy-option').query('.fancy-option-button');
_textInput = getShadowRoot('x-fancy-option').query('.fancy-option-text');
// make the background color of this web component the specified color
final changeColorFunc = (e) => this.style.backgroundColor = _textInput.value;
_button.onClick.listen(changeColorFunc);
}
}
Where `x-fancy-option` string is the name of the element.
Note: I changed your constructor to be `inserted()` method, which is a life cycle method.
Problem
For illustration reasons, I've created a class inheriting from WebComponent called FancyOption that changes to a background color specified by text in one child element upon clicking another child element. ``` import 'package:web_ui/web_ui.dart'; import 'dart:html'; class FancyOptionComponent extends WebComponent { ButtonElement _button; TextInputElement _textInput; FancyOptionComponent() { // obtain reference to button element // obtain reference to text element // failed attempt //_button = this.query('.fancy-option-button'); // error: Bad state: host element has not been set. (no idea) // make the background color of this web component the specified color final changeColorFunc = (e) => this.style.backgroundColor = _textInput.value; _button.onClick.listen(changeColorFunc); } } ``` FancyOption HTML: ``` <!DOCTYPE html> <html> <body> <element name="x-fancy-option" constructor="FancyOptionComponent" extends="div"> <template> <div> <button class='fancy-option-button'>Click me!</button> <input class='fancy-option-text' type='text'> </div> </template> <script type="application/dart" src="fancyoption.dart"></script> </element> </body> </html> ``` I have three of them on a page like this. ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sample app</title> <link rel="stylesheet" href="myapp.css"> <link rel="components" href="fancyoption.html"> </head> <body> <h3>Type a color name into a fancy option textbox, push the button and see what happens!</h3> <div is="x-fancy-option" id="fancy-option1"></div> <div is="x-fancy-option" id="fancy-option2"></div> <div is="x-fancy-option" id="fancy-option3"></div> <script type="application/dart" src="myapp.dart"></script> <script src="packages/browser/dart.js"></script> </body> </html> ```