How can a Dart Web Component obtain a reference to its children?

Question

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>

score 6 · Accepted Answer · edited May 23 '17 at 12:29

6

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.

edited May 23 '17 at 12:29

Community

1
1

answered Apr 07 '13 at 10:38

Kai Sellgren

27,954
10
75
87

I tried that. It doesn't crash but it doesn't render the components now. It gives the warning: '"_root" is not a member of FancyOptionComponent'. sdk version 0.4.4.4_r20810 – Phlox Midas Apr 07 '13 at 20:23
1

Oh, now I know why. You should do your logic in `inserted()`, not in the constructor. I'll update my answer. – Kai Sellgren Apr 07 '13 at 22:07
Brilliant. That worked. Interestingly, _root still generates that warning but the program behaviour is as I want so I'm quite content. Thanks, Kai. – Phlox Midas Apr 07 '13 at 22:19

score 2 · Answer 2 · answered May 13 '13 at 17:24

2

I understand that _root is depracated. Answers recommending _root should use getShadowRoot() in place of _root.

answered May 13 '13 at 17:24

Ken M

83
1
5

How can a Dart Web Component obtain a reference to its children?

2 Answers2