另一个模板中的 Web 组件

Question

我有一个自定义元素，由另外 2 个自定义元素扩展

import 'dart:html';

void main() {
  document.registerElement('x-c', C);
  document.registerElement('x-b', B);

}

class ViewBase extends HtmlElement{
  TemplateElement t;
  ViewBase.created():super.created(){
    t = this.querySelector('template');
    var clone = t.content.clone(true);
    this.createShadowRoot();
    this.shadowRoot.append(clone);
  }
}

class B extends ViewBase{
  B.created():super.created();
}

class C extends ViewBase{
  C.created():super.created();
}

当我尝试执行以下操作时

<x-b>
    <template>
       <p>this is a paragraph in b shadowroot</p>
       <x-c>
         <template>
            <p>this is a paragraph in c shadowroot</p>
         </template>
       </x-c>
    </template>
 </x-b>

当超级构造函数激活 B 元素内的模板时，嵌套的 C 元素构造函数永远不会被调用，知道为什么吗？

我希望在页面上看到的是

this is a paragraph in b shadowroot
this is a paragraph in c shadowroot

我得到的只是

this is a paragraph in b shadowroot

Answer 1

您需要使用 document.importNode 而不是 clone

import 'dart:html';

void main() {
  document.registerElement('x-c', C);
  document.registerElement('x-b', B);
}

class ViewBase extends HtmlElement {
  TemplateElement t;
  ViewBase.created() : super.created() {
    print("ViewBase, ${this.runtimeType}");
    var shadow = this.createShadowRoot();
    shadow.append(document.importNode((this.querySelector('template') as TemplateElement)
        .content, true));
  }
}

class B extends ViewBase {
  B.created() : super.created() {
    print("B, ${this.runtimeType}");
  }
}

class C extends ViewBase {
  C.created() : super.created(){
    print("C, ${this.runtimeType}");
  }
}

我在玩的时候稍微修改了你的代码。您当然可以像问题代码中那样使用临时变量，而不是像我那样在一行中使用。

另见
- http://www.html5rocks.com/en/tutorials/webcomponents/template/
- http://webcomponents.org/articles/introduction-to-template-element/
- http://www.w3.org/TR/DOM-Level-3-Core/core.html#Core-Document-importNode

另一个模板中的 Web 组件

A web component inside the template of another

dart