Polymer-Dart 1.0继承自定义元素

Question

在成功设置 0.17-dev-interop-reverse Polymer-Dart 库后，我终于能够在 Dart 中编写 Polymer 1.0 应用程序。 Yeyyyyyyy!!11 谢谢你帮助我！

但是，还有一个问题出现了。如何从自定义元素继承。例如。我想要一个所有实际元素都继承自的 BasePage 元素。

一些代码给你：

base_page.html

<dom-module id="base-page">
    <template>
        Yep, thats some content.
    </template>
</dom-module>

base_page.dart

@HtmlImport('base_page.html')
library test.page;

import 'dart:html';
import 'dart:js';
import 'package:polymer/polymer.dart';
import 'package:web_components/web_components.dart' show HtmlImport;

//@jsProxyReflectable
@PolymerRegister('base-page')
class BasePage extends PolymerElement {

  factory BasePage() => new Element.tag('base-page');

  BasePage.created() : super.created();

}

test_page.html

<dom-module id="test-page">
    <template>
        <shadow></shadow>
        Content of an actual page.
    </template>
</dom-module>

test_page.dart

@HtmlImport('test_page.html')
library test.app;

import 'dart:html';
import 'dart:js';
import 'package:polymer/polymer.dart';
import 'package:web_components/web_components.dart' show HtmlImport;
import 'package:test/base_page.dart';

//@jsProxyReflectable
@PolymerRegister('test-page')
class TestPage extends BasePage {

  factory TestPage() => new Element.tag('test-page');

  TestPage.created() : super.created();

}

我之前用 Polymer 0.5 做了很多，继承从来都不是问题，但由于某些原因，我没有得到 <base-page> 显示的内容（Yep, thats some content. 是失踪）。

我试图将 <shadow> 移到 <template> 之外，但它不起作用。我还尝试将 extends='base-page' 和 extendsTag: 'base-page' 添加到 <test-page>，但它的 none 似乎有效。

想法？

Answer 1

在 Polymer.js 1.0 中只支持原生元素的扩展，我很确定 Polymer.dart 0.17 不能支持如果 Polymer.js 1.0 不支持它。

此功能似乎计划在以后的 Polymer.js 版本中使用。目前最接近的是嵌入而不是扩展。

Answer 2

新聚合物仅支持扩展原生元素，https://www.polymer-project.org/1.0/docs/devguide/registering-elements.html#type-extension。在聚合物飞镖中，这在某些情况下实际上会起作用，但您仍然必须为扩展基本元素的每个元素复制 dom-module 标签。

Polymer-Dart 1.0继承自定义元素

Polymer-Dart 1.0 inheritance of custom elements

dart

polymer

dart-polymer