Change <template> (TemplateElement) programmatically

Question

Going back to my question Query elements inside <content> of a custom element

Now I would like to programmatically change the template of the nested custom element before start of rendering. Is it possible?

<polymer-element name="my-element">
  <template>
  <div>
    <template id="tml" repeat="{{items}}">
     Hi, {{}}! 
    </template>
  </div>
  </template>
  <script type="application/dart" src="my_element.dart"></script>
</polymer-element>

<polymer-element name="my-decorator">
  <template>
  <div>
    <div>Decorator</div>
    <content>
      <!-- my-element will be here-->
    </content>
  </div>
  </template>
  <script type="application/dart" src="my_decorator.dart"></script>
</polymer-element>

in index.html:

<my-decorator>
  <my-element></my-element>
</my-decorator>

in my_decorator.dart:

@override
void enteredView() {
  super.enteredView();

  ContentElement content = shadowRoot.querySelector('content');
  MyElement elm = content.getDistributedNodes().firstWhere((e) => e is MyElement);

  TemplateElement elm = elm.shadowRoot.querySelector("#tml");
  // TODO
  // change template here!
}

Answer 1

Why would you change the template?
In attached() after super.attached() the element is already rendered.

You can access the template with this.templateInstance and try to change it before super.attached() (or in the constructor or in polymerCreated). I haven't done this myself yet.

It's no problem to change the rendered element.
If you want to avoid that the this change is visible, you can set a (CSS) class initially which is defined to render the element invisible and after you are done with your changes, remove this class.