Question

我正在尝试制作嵌套的聚合物元素。编辑器没有显示任何错误或警告。

componentone.html

<link rel="import" href="componenttwo.html">

<polymer-element name="component-one" noscript>
   <template>
      <h1>Parent element</h1>
      <component-two></component-two>
   </template>
</polymer-element>

componenttwo.html

<polymer-element name="component-two" noscript>
   <template>
    <h2>Nested element</h2>   
   </template>
</polymer-element>

testcomponents.html

<html>
   <head>
      <link rel="import" href="componentone.html">
      <script src="packages/polymer/boot.js"></script> 
      <script src="packages/browser/interop.js"></script>
   </head>

   <body>   
      <component-one></component-one>

      <script type="application/dart" src="testcomponents.dart"></script>
   </body>
</html>

当我运行testcomponents.html时，浏览器中没有任何内容，但在编辑器控制台中有一个错误

Invalid CSS property name: -webkit-touch-callout
Exception: Stack Overflow
   runMicrotask (package:observe/src/microtask.dart:63:45)
   initPolymer (package:polymer/src/loader.dart:32:15)
   main (http://127.0.0.1:3030/jukudart2/web/testcomponents.html:5:22)
   registerCustomElement (package:custom_element/custom_element.dart:62:25)
   initPolymer.<anonymous closure> (package:polymer/src/loader.dart:39:26)
   runMicrotask.<anonymous closure> (package:observe/src/microtask.dart:65:16)

Answer 1

我尝试了你的例子并得到了同样的错误。

当我为两个组件添加了一个dart文件并指定了CustomTag注释时，它工作正常：

<强> componentone.html

<link rel="import" href="componenttwo.html">

<polymer-element name="component-one">
   <template>
      <h1>Parent element</h1>
      <component-two></component-two>
   </template>

   <script type="application/dart" src="componentone.dart"></script>
</polymer-element>

<强> componentone.dart

import 'package:polymer/polymer.dart';

@CustomTag("component-one")
class ComponentOne extends PolymerElement {  
}

<强> componenttwo.html

<polymer-element name="component-two">
   <template>
    <h2>Nested element</h2>
   </template>
   <script type="application/dart" src="componenttwo.dart"></script>
</polymer-element>

<强> componenttwo.dart

import 'package:polymer/polymer.dart';

@CustomTag("component-two")
class ComponentTwo extends PolymerElement {
}

Answer 2

在componentone.html中尝试将链接放在聚合物元素标记内但在模板标记之前。（对不起，我的简洁，在手机上）

如何在另一个聚合物元素内使用聚合物元素

2 个答案: