How to set a component published attribute

Question

I have a dart-polymer component mediator-form that I would like to add programmatically to another component. That I have done successfully. However, mediator-form is used several times. For my purpose I would like to pass @published data in the form

<mediator-form mediator='Medication'>

where the published mediator data is used.

My problem is I don't know how to set the mediator='Medication' programmatically.

My attempt is shown below

.html

  <link rel='import' href='mediator_form.html'>

.dart

  var newElem = new Element.tag('mediator-form')
    ..attributes['mediator'] = 'Medication';

does not work. newElement does not have a setProperty() method so it does not seem possible.

Any help is appreciated. Thanks.

Answer 1

This should work

var newElem = new Element.tag('mediator-form')
  ..attributes['mediator'] = 'Medication';

maybe it only works after you added it to the DOM (haven't tried myself this way).
This should also work:

var newElem = (new Element.tag('mediator-form') as MediatorForm)
  ..mediator = 'Medication';

If it doesn't you probably haven't imported the element.

Answer 2

You can set value directly on dart object, but to have that object you have to wait at least one cycle of event loop to give polymer a chance to instantiate your object in a DOM:

document.body.append(new Element.tag("mediator-form"));

// Delaying the following after element is instantiated
Timer.run((){
  MediatorForm form = document.body.querySelector('mediator-form');
  form.mediator = "Medication";
});