Dart-JS interop: JS object not loading when running in Dartium

Question

When I run the code in Chrome (transpiled to JS) the object is usable upon page load. The issue arises when I run the code in Chromium (native Dart + JS), the object is not loaded, in this case, 0 is printed for dateObject['length'].

date_picker.dart

part of myproject.common.ui;

@Component(
    selector: 'date_picker',
    templateUrl: "date_picker.html",
    useShadowDom: false
)
class DatePickerComponent{


    DatePickerComponent() {
        new Future(() {

            var dateObject = context.callMethod("jQuery", ['#date_picker']);
            print(dateObject['length']);
            var dateChanged = dateObject.callMethod("datetimepicker", [new JsObject.jsify({"format": 'MM/DD/YYYY'})]);
            dateChanged.callMethod('on', ['dp.change']);

        });
    }
}

date_picker.html

    <div class="form-group">
        <div class='input-group date' id='date_picker'>
            <input type='text' class="form-control"/>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
        </div>
    </div>

Adding modified date_picker.dart using answer from comments

part of my_project.common.ui;

@Component(
    selector: 'date_picker',
    templateUrl: "date_picker.html",
    useShadowDom: false
)
@Injectable()
class DatePickerComponent implements ShadowRootAware{

void onShadowRoot(_){


    new Future((){

        var dateObject = context.callMethod("jQuery", ['#date_picker']);
        var dateChanged = dateObject.callMethod("datetimepicker", [new JsObject.jsify({"format": 'MM/DD/YYYY'})]);
        dateChanged.callMethod('on', ['dp.change']);

    });
}
    DatePickerComponent();
}

Answer 1

Assuming you are using angular1 you can implement ShadowRootAware and put your code into void onShadowRoot(_) (even if you have useShadowDom: false this method should be called)