Question

回到我的问题Query elements inside <content> of a custom element

现在我想在开始渲染之前以编程方式更改嵌套自定义元素的模板。有可能吗？

<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>

index.html中的

：

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

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

为什么要更改模板？
在attached() super.attached()之后，元素已经呈现。

您可以使用this.templateInstance访问模板并尝试在 super.attached()之前（或在构造函数中或在polymerCreated中）更改。我自己还没有这样做。

更改渲染元素没有问题如果要避免此更改可见，可以先设置一个（CSS）类，该类定义为使元素不可见，并在完成更改后删除此类。

以编程方式更改<template>（TemplateElement）</template>

1 个答案: